BİLİŞİM TEKNOLOJİLERİ

Ebat: px
Şu sayfadan göstermeyi başlat:

Download "BİLİŞİM TEKNOLOJİLERİ"

Transkript

1 T.C. MİLLÎ EĞİTİM BAKANLIĞI BİLİŞİM TEKNOLOJİLERİ GELİŞMİŞ İNTERNET UYGULAMALARINDA TASARIM ARAÇLARI 482BK0150 Ankara, 2012

2 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan yeterlikleri kazandırmaya yönelik olarak öğrencilere rehberlik etmek amacıyla hazırlanmış bireysel öğrenme materyalidir. Millî Eğitim Bakanlığınca ücretsiz olarak verilmiştir. PARA İLE SATILMAZ.

3 İÇİNDEKİLER 1. YERLEŞİM 1.1. StackPanel 1.2. Tuval (Canvas) 1.3. Grid 1.4. Border 2. FIRÇALAR 2.1. SolidColorBrush 2.2. LinearGradientBrush 2.3. RadialGradientBrush 2.4. ImageBrush 2.5. VideoBrush 3. GÖRSEL ÖZELLİKLER 3.1. Ölçü ve Yerleşim Özellikleri 3.2. Opacity 3.3. Cursor behaviors 3.4. Stroke 4. ŞEKİLLER 4.1. Elips (Ellipse) 4.2. Dikdörtgen (Rectangle) 4.3. Çizgi (Line) 4.4. Yol (Path) 4.5. Çoklu Geometrik Nesneler (GeometryGroup) 5. KONTROLLER 5.1. Tuval (Canvas) 5.2. Resim (Image) 5.3. Kabartma (Glyphs) 5.4. Metin Bloğu (TextBlock) 6. DÖNÜŞÜM VE ANİMASYON 6.1. Döndürme(RotateTransform) 6.2. Ölçeklendirme (ScaleTransform) 6.3. Dönüşüm (TranslateTransform) i

4 6.4. Çarpıtma (SkewTransform) 6.5. Matris (MatrixTransform) 6.6. Tetikleyiciler (Trigger ve Event Triggerlar) 6.7. Geçmiş (BeginStoryboard ve Storyboard) 6.8. Animasyon parametreleri 6.9. Anahtar Çerçeveler (Key Frame) ÖLÇME VE DEĞERLENDİRME: ii

5 KOD ALAN DAL/MESLEK AÇIKLAMALAR AÇIKLAMALAR 482BK0150 Bilişim Teknolojileri Veri Tabanı Programcısı MODÜLÜN ADI Gelişmiş İnternet Uygulamalarında Tasarım Araçları Tasarım özelliklerini düzenlemeyi, fırçaları kullanmayı, görsel özellikleri kullanarak uygulama geliştirmeyi, şekil işlemlerini MODÜLÜN TANIMI gerçekleştirmeyi, kontrolleri kullanmayı, dönüşüm ve animasyon işlemlerini yapmayı sağlayan modüldür. SÜRE 40/32 ÖN KOŞUL YETERLİK XAML tasarım araçlarını kullanmak Genel Amaç Öğrenci, bu modül ile gerekli ortam sağlandığında; tasarım araçlarını kullanabileceksiniz. Amaçlar 1. Tasarım özelliklerini düzenleyebilecektir. MODÜLÜN AMACI 2. Fırça işlemlerini gerçekleştirebilecektir. 3. Görsel özellikleri kullanarak uygulama geliştirebilecektir. 4. Şekil işlemlerini gerçekleştirebilecektir. 5. Kontrolleri kullanabilecektir. 6. Dönüşüm ve animasyon işlemlerini gerçekleştirebilecektir. EĞİTİM ÖĞRETİM ORTAMLARI VE DONANIMLARI Ortam: Atölye, Bilişim teknolojisi sınıfı, kütüphane, internet, bireysel öğrenme ortamları vb. Donanım: Bilgisayar(PC), Projeksiyon, projeksiyon perdesi, yazıcı, gerekli olan yazılımlar, harici harddisk, ilgili kitaplar, dökümanlar ÖLÇME VE DEĞERLENDİRME Modül içinde yer alan her öğrenme faaliyetinden sonra verilen ölçme araçları ile kendinizi değerlendireceksiniz. Öğretmen modül sonunda ölçme aracı (çoktan seçmeli test, doğru-yanlış testi, boşluk doldurma, eşleştirme vb.) kullanarak modül uygulamaları ile kazandığınız bilgi ve becerileri ölçerek sizi değerlendirecektir. iii

6 GİRİŞ GİRİŞ Sevgili Öğrenci, Günümüzde internet üzerinden birçok uygulamalar yapılmaktadır. Yapılan tüm uygulamalar sizlerin çalışmalarına yansımaktadır. Tüm uygulamalarda yapılması istenilen tasarım özelliklerini düzenleme sizlerin çalışmalarına yansıyacak olan işlemlerden birisidir. Tüm görsel olarak yapacağınız internet uygulamalarının arayüz ile ilgili olan bölümünü içerir. Fırçaları kullanma işleminde ise, ihtiyaca uygun fırça aracını kullanma becerisini kazanmaktasınız. Görsel özellikleri kullanarak uygulama geliştirme işlemi ile uygulamanın görsel özelliklerini ihtiyaca uygun şekilde düzenlemesini gerçekleştireceksiniz. Şekil işlemlerini gerçekleştirme işlemi sonucunda, ihtiyaca uygun şekil düzenlemesini yapmayı kazanmış olacaksınız. Kontrolleri kullanma işlemi ile, uygulama içinde ihtiyaç duyulan kontrolleri hatasız olarak gerçekleştirmeyi sağlayacaksınız. Dönüşüm ve animasyon işlemlerini yapmayı sağlama işlemi sonucunda, uygulama içinde kullanılan nesneler için istenilen dönüşüm işlemlerini gerçekleştirmeyi ve anahtar çerçeveleri, uygun değişim noktalarında kullanmayı kazanacaksınız. 1

7 2

8 ÖĞRENME FAALİYETİ 1 AMAÇ ÖĞRENME FAALİYETİ-1 Tasarım özelliklerini düzenleyebileceksiniz. ARAŞTIRMA Editör panellerini düzenlemek Tuval ayarlarını yapmak Izgara düzenlemelerini yapmak Kenarlıklarla ilgili ayarlamaları yapmak 1. YERLEŞİM XAML, Siverlight ve WPC teknolojilerinin tasarım kısımlarını geliştireceğimiz, statik ve dinamik kullanıcı arayüzleri oluşturmamızı sağlayan işaretleme dilidir. XML in gelişletilmiş hali gibi görülmekte ve uzantısı.xaml dır. Bu yüzden başlatılan her tag sonlandırılmak zorundadır. XAML bir programlama dili olmamakla beraber uygulama mantığı ve olaylar da codebehind dosyalarında bulunmaktadır. WCF (Windows Presentation Foundation), yeni nesil kullanıcılar için Windows Vista/7 görünümünde arayüzler sunmamızı sağlayan XAML tabanlı bir sistemidir. WPF kullanıcı arayüzleri geliştirmede ve görüntülemede önemli bir açığı kapatmıştır. Kullanıcı ile daha etkileşimli uygulamalar kullanarak, ses ve görüntülerle zengin içerikleri uygulamalar yapmamızı sağlamaktadır. XAML de ilk tanımlanan eleman, root eleman olarak adlandırılır. UserControl, bir root elemandır. Root elemanlarının kapsadığı panel elemanları kullanıcı ara yüzleri için Stackpanel, Grid,Canvas ve Border gibi düzen kontrolleri sunar StackPanel Yatay ve dikey olarak yönlendirilmiş tek satırlık değerler eklemek için kullanılır. Bu kontrolümüz daha iyi kavramak için projemize bir form ekleyelim. XAML kod alanına gelerek aşağıdaki kodumuzu yazarak şekilleri oluşturalım. <Gird> <Canvas> <Ellipse Width= 100 Height= 100 Fill= Red /> <Ellipse Width= 80 Height= 80 Fill= Orange /> <Ellipse Width= 60 Height= 60 Fill= Yellow /> <Ellipse Width= 40 Height= 40 Fill= Green /> 3

9 <Ellipse Width= 20 Height= 20 Fill= Blue /> </Canvas> </Gird> Kodumuzu yazdıktan sonra tasarıma baktığımızda şekillerimizin üst üste oluştuğunu görebiliriz. Resim 1.1: Stakpanel Kontol 1(framework) Burada yer alan kodlarımızı Stackpanel içerisine yazdığımızda her şekil bir satır olarak çizilecektir. <Gird> <Stackpanel Margin= 0,0,0,-44 > <Ellipse Width= 100 Height= 100 Fill= Red /> <Ellipse Width= 80 Height= 80 Fill= Orange /> <Ellipse Width= 60 Height= 60 Fill= Yellow /> <Ellipse Width= 40 Height= 40 Fill= Green /> <Ellipse Width= 20 Height= 20 Fill= Blue /> </ Stackpanel > </Gird> Kodumuzu düzenledikten sonra çalıştıralım. 4

10 Resim 1.2: Stakpanel Kontol 2 (framework) 1.2. Tuval (Canvas) Form içerisinde kontrolleri düzgün yerleştirmek için kullanılan bir kontroldür. Canvas paneli daha çok grafiksel işlemlerde veya animasyon yapımında tercih edilir. Bunun sebebi, Canvas panelinin içerisine alacağı kontrolü noktasal olarak belirtmesidir. Canvas kontrol içerisinde sol,sağ,üst ve alt köşelere göre kontrolleri yerleştirmek için kullanılır. Aşağıdaki kodumuzu XAML alanına yazalım. <Canvas> <Button Content= Sol Ust Width= 85 Height= 30 Canvas.Top= 20 Canvas.Left= 20 /> <Button Content= Sag Ust Width= 85 Height= 30 Canvas.Top= 20 Canvas.Right= 20 /> <Button Content= Sol Alt Width= 85 Height= 30 Canvas.Bottom= 20 Canvas.Left= 20 /> <Button Content= Sag Alt Width= 8a5 Height= 30 Canvas.Bottom= 20 Canvas.Right= 20 /> </Canvas> Kodumuz yazıp Design alanına baktığımızda Button kontrollerinin yerleştiğini görebilirsiniz. 5

11 1.3. Grid Resim 1.3: Canvas Kontrol (framework) Form üzerinde satır ve sütun olarak alanlar oluşturulması için kullanılır. Satır ve sütun ayarlarımız için genişlik ve yükseklik değerlerini belirlemeliyiz. Grid Kontrolü; RowDefinitions property si satır oluşturmamızı sağlar. ColumnDefinitions property si sütun oluşturmamızı sağlar. ShaowGridLines property si ile tanımlanan satır ve sütunları ekranda görebilirsiniz. Burada ölçüler genelde pixel(px) cinsinden verilir. Ama farklı ölçü birimleri de bu değerleri atayabiliriz. Aşağıdaki XAML kodumuzu yazalım. <Gird Margin= 5 > <Grid.ColumnDefinitions> <ColumnDefinition Width= 80 /> <ColumnDefinition Width= 80 /> <ColumnDefinition Width= 80 /> <ColumnDefinition Width= 80 /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height= 35 /> <RowDefinition Width= 216* /> </Grid.RowDefinitions> </Gird> Burada Grid ler şeklinde form alanımızı görebiliriz. 6

12 Resim 1.4: GridKontrol (framework) 1.4. Border Bir sınır belirleyen, arkaplan oluşturmak için kullanılan kontroldür. Projemize bir form ekleyelim ve XAML kodumuzu yazalım. <Gird> <Border HorizontalAligment= Center VerticalAligmetnt= Center Width= 150 Height= 100 CornerRadius= 20 BorderBrush= Red BorderThickness= 5 > <Border.BitmapEffect> <DropShadowBitmapEffect/> </Border.BitmapEffect> <Border.Background> <LinearGradientBrush Endpoint= 0.5,2 Startpoint= 0.2,0 > <GradientStop Color= Aqua Offset= 0 /> <GradientStop Color= Black Offset= 1 /> <LinearGradientBrush> </Border.Background> <TextBlock Width= 100 Height= 50 Fontweight= Bold TextWrapping= Wrap TextAligment= Center Text= Örnek Yazı Alanımız. /> </Border> </Gird> XMAL kodumuzu yazdıktan sonra projemizi çalıştıralım. 7

13 Resim 1.5: BorderKontrol (framework) 8

14 UYGULAMA FAALİYETİ UYGULAMA FAALİYETİ Aşağıda belirtilen işlem basamaklarını ve önerileri dikkate alarak tasarım özelliklerini düzenleyiniz. Kullanılacak araç ve gereçler: Bilgisayar (PCveya laptop), Projeksiyon, projeksiyon perdesi, yazıcı, gerekli olan yazılımlar, ilgili kitaplar ve dökümanlar İşlem Basamakları Öneriler Tasarım özelliklerini düzenlemek için; Editör panellerini düzenleyiniz. Tuval ayarlarını yapınız. Izgara düzenlemelerini yapınız. StackPanel düzen panellerini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <Stackpan nel Height= 238 Margin= 53, 36, 0,0 Name= stackpanel1 Orientation= VerticalAligment=Top HorizontalAligment= Left Width= 371 MaxHeight= 750 MaxWidth= 750 > <MediaElement Heigh= 120 Name= mediaelement1 Width= 160 Source= Wildlife.wmv /> <Button Content= Oynat Height=23 Name= button2 Width= 75 HorizontalAligment= Center /> <Button Content= Duraklat Height=23 Name= button3 Width= 75 HorizontalAligment= Center /> </Stackpanel> </Grid> Canvas düzen panellerini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Canvas Background= AntiqueWhite > <Rectangle Canvas.Left= 35 Canvas.Top= 80 Height= 200 Width= 200 Stroke= Yellow StrokeThickness= 5 Fill= Red /> <Rectangle Canvas.Left= 160 Canvas.Top= 62 Height= 200 Width= 200 Stroke= Yellow StrokeThickness= 5 Fill= Blue /> <Rectangle Canvas.Left= 272 Canvas.Top= 36 Height= 200 Width= 200 Stroke= Yellow StrokeThickness= 5 Fill= Green /> </Canvas> Grid düzen panellerini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width= 100* /> < ColumnDefinition Width= 176* /> 9

15 Kenarlıklarla ilgili ayarlamaları yapınız. <ColumnDefinition Width= 227* /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height= 40* /> <RowDefinition Height= 30* /> <RowDefinition Height= 28* /> <RowDefinition Height= 28* /> <RowDefinition Height= 185* /> </Grid.RowDefinitions> </Grid> Border düzen panellerini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Border BorderBrush= FF9D1212 BorderThickness= 5 Height= 161 HorizontalAligment= Left Margin= 46,92,0,0 Name= border1 VerticalAligment= Top Width= 207 CornerRadius= 25 Background= {x:null} > <image Height= 141 Name= image1 Stretch= Fill Width= 179 Source= /silverlightapplication2;component/images/kodlab.jpg /> </Border> Ayrıca Border kontrolünün CornerRadius property sine CornerRadius sınıfın yapıcı metodunda her köşe için farklı değerler belirleyebilirsiniz. 10

16 KONTROL LİSTESİ Bu faaliyet kapsamında aşağıda listelenen davranışlardan kazandığınız beceriler için Evet, kazanamadığınız beceriler için Hayır kutucuğuna (X) işareti koyarak kendinizi değerlendiriniz. Değerlendirme Ölçütleri Evet Hayır Tasarım özelliklerini düzenlemek için; 1 Editör panellerini düzenlediniz mi? 2 Tuval ayarlarını yaptınız mı? 3 Izgara düzenlemelerini yaptınız mı? 4 Kenarlıklarla ilgili ayarlamaları yaptınız mı? DEĞERLENDİRME Değerlendirme sonunda Hayır şeklindeki cevaplarınızı bir daha gözden geçiriniz. Kendinizi yeterli görmüyorsanız öğrenme faaliyetini tekrar ediniz. Bütün cevaplarınız Evet ise Ölçme ve Değerlendirme ye geçiniz. 11

17 ÖLÇME VE DEĞERLENDİRME ÖLÇME VE DEĞERLENDİRME Aşağıdaki soruları dikkatlice okuyunuz ve doğru seçeneği işaretleyiniz. 1. Aşağıdakilerden hangisi Silverlight ve WPC teknolojilerinin tasarım kısımlarını geliştireceğimiz, statik ve dinamik kullanıcı ara yüzleri oluşturmamızı sağlayan işaretleme dilidir? A) HTML B) DHTML C) XAML D) CSS 2. Kullanıcı ile daha etkileşimli uygulamalar kullanarak, ses ve görüntülerle zengin içerikleri uygulamalar yapmamızı sağlayan sistemdir? A) WPF B) SQL Server C) ASP.NET D) XML 3. I- Editör panellerini düzenlemek II- Tuval ayarlarını yapmak III- Izgara düzenlemelerini yaptınız Yukarıdakilerden hangileri Grid düzen kontrollerini içerir? A) Yalnız I B) Yalnız II C) Yalnız III D) I ve III 4. Aşağıdakilerden hangisi yatay ve dikey olarak yönlendirilmiş tek satırlık değerler eklemek için kullanılır? A) Border B) Grid C) Tuval(Canvas) D) Stackpanel 5. Aşağıdakilerden hangisi form içerisinde kontrolleri düzgün yerleştirmek için kullanılan bir kontroldür? A) Grid B) Border C) Tuval(Canvas) D) Stackpanel 6. Aşağıdakilerden hangisi form üzerinde satır ve sütun olarak alanlar oluşturulması için kullanılır? A) Stackpanel B) Border C) Tuval(Canvas) D) Grid Aşağıdaki cümlelerde boş bırakılan yerlere doğru sözcükleri yazınız. 7. Kenarlıklarla ilgili ayarlamaları düzeni ile yapılır. 8. Satır ve sütun ayarlarımız için genişlik ve yükseklik değerleri. ile belirlenir. DEĞERLENDİRME Cevaplarınızı cevap anahtarıyla karşılaştırınız. Yanlış cevap verdiğiniz ya da cevap verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız. Cevaplarınızın tümü doğru ise bir sonraki öğrenme faaliyetine geçiniz. 12

18 ÖĞRENME FAALİYETİ 2 AMAÇ ÖĞRENME FAALİYETİ-2 Fırçaları kullanabileceksiniz. ARAŞTIRMA Tek renk fırçasını kullanınız. Doğrusal olarak değişen renk fırçasını kullanınız. Yayılarak değişen renk fırçasını kullanınız. Resim fırçasını kullanınız Video fırçasını kullanınız. 2. FIRÇALAR WFC ve Silverlight da görsel düzeni oluşturmak için fırçalar kullanılmaktadır. WFC ve Silverlight da bulunan tüm kontroller ve elementler fırçalar ile görselleştirilir. Fırçalar ile renkleri istenilen yapıya farklı şekillerle uygulayabilirsiniz. Temel olarak fırçalar, Brushes sınıfında türetilmiştir. Fırçaların farklı çeşitleri vardır. Her fırçanın kendine özgü çıktısı vardır. Fırça çeşitlerimiz ise şunlardır: SolidColorBrush LinearGradientBrush RadialGradientBrush ImageBrush VideoBrush 2.1. SolidColorBrush Kontrol içerisinde dolgu renklerini ayarlamak için kullanılır. SolidColorBrush tanılamak için; <SolidColorBrush Color= Red /> şeklinde yazmamız yeterlidir. Aşağıdaki XAML kodumuzu yazalım. <Grid> <Rectangle Width= 200 Height= 40 Stroke= Blue StrokeThickness= 1 > < Rectangle.Fill> <SolidColorBrush Color= #33FFFF /> </ Rectangle.Fill> </ Rectangle> </Grid> 13

19 2.2. LinearGradientBrush Resim 2.1 : SolidColorBrush Doğrusal renk geçişlerinde kullanılır. Aşağıdaki XAML kodumuzu yazalım. <Grid> <Rectangle Width="200" Height="100"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> </Grid> Resim 2.2 : Linear gradient brush Örnek; Dikey (horizontal linear gradient) oluşturmak için aşağıdaki XMAL kodları kullanılır. <Grid> <Rectangle Width="200" Height="100"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="Yellow" Offset="0.0" /> 14

20 <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> </Grid> Resim 2.3 : Horizontal linear gradient brush Örnek; Yatay (vertical linear gradient) oluşturmak için aşağıdaki XMAL kodları kullanılır. <Grid> <Rectangle Width="200" Height="100"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> </Grid> 2.3. RadialGradientBrush Resim 2.4 : Vertical linear gradient brush Dairesel renk geçişleri için kullanılır. Aşağıdaki XAML kodumuzu yazalım. <Grid> <Rectangle Width= 300 Height= 200 > 15

21 < Rectangle.Fill> <RadialGradientBrush> <GradientStop Color= Blue Offset= 0 /> < GradientStop Color= Yellow Offset= 1 /> </RadialGradientBrush> < /Rectangle.Fill> </Rectangle> </Grid> 2.4. ImageBrush Resim 2.5 : Radial Gradient Uygulama Bir resmi fırça olarak kullanabiliriz. Aşağıdaki XAML kodumuzu yazalım. <Grid> <Rectangle Width= 75 Height= 75 > < Rectangle.Fill> <ImageBrush ImageSource= SekilFirca.png /> </ Rectangle.Fill> </ Rectangle> </Grid> Kodlamamız sonucunda oluşan karenin dolgu rengi aradığımız resim olacaktır. Resim 2.6 : ImageBrush Uygulama 16

22 2.5. VideoBrush VideoBrush, LinearGradientBrush veya bir ImageBrush benzer bir fırça objesi tipidir. Ancak, düz renk, degrade, ya da bir görüntü olan bir alan boyama yerine, video içeriği ile bir alanı boyar. Bu video içeriği bir MediaElement tarafından sağlanır. Sadece başka fırça türleri gibi, dolgu boyamak için bir şeklin, bir yol, bir tuval Arka Plan, ya da bir TextBlock veya Run Önalan bir Dikdörtgen veya geometri içeriği VideoBrush olarak kullanılabilir. Aşağıdaki örnekte, bir TextBlock ın Önalanı boyamak için VideoBrush kullanımı gösterilir. Aşağıdaki XAML kodumuzu yazalım. <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <MediaElement x:name="butterflymediaelement" Source="sampleMedia/Butterfly.wmv" IsMuted="True" Opacity="0.0" IsHitTestVisible="False" /> <TextBlock Canvas.Left="5" Canvas.Top="30" FontFamily="Verdana" FontSize="120" FontWeight="Bold" TextWrapping="Wrap" Text="Video"> <!-- Paint the text with video. --> <TextBlock.Foreground> <VideoBrush SourceName="butterflyMediaElement" Stretch="UniformToFill" /> </TextBlock.Foreground> </TextBlock> </Canvas> 17

23 UYGULAMA FAALİYETİ UYGULAMA FAALİYETİ İhtiyaca uygun fırça aracını kullanınız. Kullanılan araç ve gereçler: Bilgisayar (PC veya laptop), Projeksiyon, projeksiyon perdesi, yazıcı, gerekli olan yazılımlar, ilgili kitaplar ve dokümanlar İşlem Basamakları Tek renk fırçasını kullanınız. Doğrusal olarak değişen renk fırçasını kullanınız. Yayılarak değişen renk fırçasını kullanınız. 18 Öneriler SolidColorBrush özelliğini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Ellipse Height= 100 HorizontalAligment= Left Width= 200 > <Ellipse.Fill> <SolidColorBrush Color= Red ></SolidColorBrush> </ Ellipse.Fill> < /Ellipse> LinearGradientBrush özelliğini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Ellipse Height= 100 HorizontalAligment= Left Margin= 69,96,0,0 Name= ellipse1 Stroke= Black VerticalAligment= Top Width= 372 > <Ellipse.Fill> <LinearGradientBrush> <GradientStop Color= RosyBrown Offset= 0.1 /> < GradientStop Color= Yellow Offset= 0.25 /> < GradientStop Color= White Offset= 0.75 /> < GradientStop Color= BlueViolet Offset= 1 /> </LinearGradientBrush> </Ellipse.Fill> < /Ellipse> RadialGradientBrush özelliğini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <Rectangle Height= 238 HorizontalAligment= Left Margin= 67, 33, 0, 0 Name= rectangle1 Stroke= Black

24 Resim fırçasını kullanınız. Video fırçasını kullanınız. VerticalAligment= Top Widht= 343 > <Rectangle.Fill> <RadialGradientBrush GradientOrigin= 0.9, 0.3 > < RadialGradientBrush.GradientStops> <GradientStop Color= Black Offset= 0.2 /> <GradientStop Color= Red Offset= 0.50 /> <GradientStop Color= AntiqueWhite Offset= 0 /> <GradientStop Color= AntiqueWhite Offset= 1 /> < /RadialGradientBrush.GradientStops> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> </Grid> ImageBrush özelliğini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <Rectangle Height= 238 HorizontalAligment= Left Margin= 46, 32, 0, 0 Name= rectangle1 Stroke= Black VerticalAligment= Top Width= 404 > <Rectangle.Fill> <ImageBrush ImageSource= F:\a2s.png /> </Rectangle.Fill> < /Rectangle> </Grid> VideoBrush özelliğini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Canvas> <MediaElement x:name="mybutterflymediaelement" Source="sampleMedia/Butterfly.wmv" /> 19 <! Texti boyamak için kullanılır. --> <TextBlock Canvas.Left="5" Canvas.Top="30"

25 FontFamily="Verdana" FontSize="120" FontWeight="Bold" Text="Video"> <TextBlock.Foreground> <VideoBrush /> </TextBlock.Foreground> </TextBlock> </Canvas> 20

26 KONTROL LİSTESİ Bu faaliyet kapsamında aşağıda listelenen davranışlardan kazandığınız beceriler için Evet, kazanamadığınız beceriler için Hayır kutucuğuna (X) işareti koyarak kendinizi değerlendiriniz. Değerlendirme Ölçütleri Evet Hayır 1 Tek renk fırçasını kullandınız mı? 2 Doğrusal olarak değişen renk fırçasını kullandınız mı? 3 Yayılarak değişen renk fırçasını kullandınız mı? 4 Resim fırçasını kullandınız mı? 5 Video fırçasını kullandınız mı? DEĞERLENDİRME Değerlendirme sonunda Hayır şeklindeki cevaplarınızı bir daha gözden geçiriniz. Kendinizi yeterli görmüyorsanız öğrenme faaliyetini tekrar ediniz. Bütün cevaplarınız Evet ise Ölçme ve Değerlendirme ye geçiniz. 21

27 ÖLÇME VE DEĞERLENDİRME ÖLÇME VE DEĞERLENDİRME Aşağıdaki soruları dikkatlice okuyunuz ve doğru seçeneği işaretleyiniz. 1. Aşağıdakilerden hangisi fırça çeşitlerinden değildir? A ) ImageBrush B ) SolidColorBrush C ) VisualBrush D ) RadialGradientBrush 2. Aşağıdakilerden hangisi kontrol içerisinde dolgu renklerini ayarlamak için kullanılan fırçadır çeşididir? A ) ImageBrush B ) SolidColorBrush C ) RadialGradientBrush D ) LinearGradientBrush 3. Aşağıdakilerden hangisi dairesel renk geçişleri için kullanılan fırça çeşididir? A ) RadialGradientBrush B ) LinearGradientBrush C ) SolidColorBrush D ) VideoBrush 4. Dikey renk düzeneği oluşturan fırça aşağıdakilerden hangisidir? A ) HorizontalLinearGradientBrush B ) VerticalLinearGradientBrush C ) RadialGradientBrush D ) VisualBrush 5. Aşağıdakilerden hangisi doğrusal renk geçişlerinde kullanılan fırça çeşididir? A ) SolidColorBrush B ) RadialGradientBrush C ) VideoBrush D )LinearGradientBrush 6. Yatay renk düzeneği oluşturan fırça aşağıdakilerden hangisidir? A ) VideoBrush B ) HorizontalLinearGradientBrush C ) VerticalLinearGradientBrush D ) SolidColorBrush 7. Aşağıdakilerden hangisi tek renk fırçadır? A ) VideoBrush B ) ImageBrush C ) LinearGradientBrush D ) SolidColorBrush 8. Aşağıdakilerden hangisi resim fırçasıdır? A ) VideoBrush B ) ImageBrush C ) RadialGradientBrush D ) LinearGradientBrush 22

28 DEĞERLENDİRME Cevaplarınızı cevap anahtarıyla karşılaştırınız. Yanlış cevap verdiğiniz ya da cevap verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız. Cevaplarınızın tümü doğru ise bir sonraki öğrenme faaliyetine geçiniz. 23

29 ÖĞRENME FAALİYETİ 3 AMAÇ Görsel Özellikleri Kullanarak Uygulama Geliştiriniz. ARAŞTIRMA Ölçü ve yerleşim özelliklerini düzenleyiniz Zıtlık ayarını yapınız. İşaretçi olaylarını düzenleyiniz. Cursor behaviors özelliğiniz kullanınız. Uygulama içindeki hareketleri düzenleyiniz. 3. GÖRSEL ÖZELLİKLER XAML içerisinde nesnelerin özellikleri olarak yazılarak ölçü yerleşim birimleri, opacity, cursor behavour ve stroke kullanılır Ölçü ve Yerleşim Özellikleri Ölçü birimleri aşağıdaki tabloda yer almaktadır. Tablo 1.1: Ölçü Birimleri Atama Değeri Değerin Adı Açıklama px Pixel(Piksel) 1 pixel in Inches(İnç) 96 pixel cm Centimeters(Santimetre) 2,54 cm = 1 pixel pt Points(Nokta) 1/72 inch XAML boyutları, yükseklik ve genişlik özelliklerini kullanarak çift bir değer alarak ayarlanır. 100 piksel genişliğinde ve 200 piksel yüksekliğinde bir dikdörtgen oluşturmak için, örneğin, şöyle XAML tanımlarsınız: <Rectangle Fill="Black" Width="100" Height="200" /> Ayrıca, üst tuvala bağlı Yukarı (Top) ve Sol (Left) özellikleri nesnenin göreli konumunu belirtmek için kullanılır. 24

30 Sayı 0 arasındaki değerleri kapsayan ve PositiveInfinity dört olası boyut özelliklerini belirten bir Thickness yapısı bulunmaktadır. Margin: Öznitelik kullanımını da simetrik ve mantıksal olarak verilen sırada geçerli olan kısaltılmış değerleri kabul eder. Örneğin, Tüm özellikler, Margin="20" anlamında yorumlanacak bir Thickness 20 değer olacak şekilde ayarlanır. Margin="20,50"anlamında yorumlanacak bir Thickness ile Left ve Right yönlerini 20'ye ayarlanır ve Top ve Bottom 50 olarak ayarlanır Opacity Opacity, nesnelerde saydamlık için kullanılan bir özelliktir. Aşağıdaki XAML Kodlarını yazınız. <!-- Resim ve üzerine yazılı metnin 25% opak olmasını sağlar. --> <Image Opacity="0.25">A Image</ Image > 3.3. Cursor behaviors ( a ) ( b ) Resim 3.1: Resimlerde %25 opacity ayarı Kullanıcılara iyi bir geri besleme sağlamak için, uygun olan eylem türünü belirtmek için ve fare imlecini değiştirmek için sık sık gerekli olabilir. XAML elemanları aşağıdaki değerleri ayarlamak için izin veren imleç özellikleri; Arrow, Default, Hand, Ibeam, None, Wait Stroke Stroke: Dış çerçeve rengini seçer. StrokeThickness: Dış çerçeve kalınlığını ayarlar. 25

31 StrokeDashCap: Şeklin dış kenarlarını nasıl bir kesikli çizgi ile gösterileceği belirtilir. StrokeDashArray: Kesikli kenarlarda kesikli çizginin ne kadar boşlukta tekrarlanacağını belirtir. 26

32 UYGULAMA FAALİYETİ Uygulamanın görsel özelliklerini ihtiyaca uygun şekilde düzenleyiniz. Kullanılan araç ve gereçler: Bilgisayar (PCveya laptop), Projeksiyon, projeksiyon perdesi, yazıcı, gerekli olan yazılımlar, ilgili kitaplar ve dökümanlar İşlem Basamakları Ölçü ve yerleşim özelliklerini düzenleyiniz. Zıtlık ayarını yapınız. İşaretçi olaylarını düzenleyiniz. Cursor behaviors özelliğiniz kullanınız. Uygulama içindeki hareketleri düzenleyiniz. 27 Öneriler Margin değerler ile ilgili uygulama yapınız. Aşağıdaki XAML Kodlarını yazınız. <object> <object.margin> <Thickness Left="left" Top="top" Right="right" Bottom="bottom"/> </object.margin> </object> Opacity, butona efekt vermek için kullanılır. Aşağıdaki XAML Kodlarını yazınız. opacity of (0.25 * 0.5 = 0.125). --> <Button Opacity="0.25"> <StackPanel Orientation="Horizontal"> <TextBlock VerticalAlignment="Center" Margin="10">A Button</TextBlock> <Image Source="sampleImages\berries.jpg" Width="50" Height="50" Opacity="0.5"/> </StackPanel> </Button> Aşağıdaki XAML Kodlarını yazınız. <Grid x:name= LayoutRoot Background= White > <Rectangle Width= 300 Height= 200 Fill= Red > <i:interaction.behaviours> <local:clickanddeletebehavior> </i:interaction.behaviours> </Rectangle> </Grid> Aşağıdaki XAML Kodlarını yazınız. Canvas xmlns="http://schemas.microsoft.com/2003/xaml"> <Rectangle Fill="#33CC66" Width="2in" Height="1in"

33 Canvas.Top="25" Canvas.Left="50" StrokeThickness="6px" Stroke="Orange" /> <Ellipse Fill="yellow" CenterX="1.5in" CenterY="1.1in" RadiusX=".5in" RadiusY="1in" StrokeThickness="4px" Stroke="Blue" /> <Text Canvas.Top="50" Canvas.Left="60" Foreground="#000000" FontWeight="Bold" FontFamily="Arial" FontStyle="Normal" FontSize="25">Hello Shapes!</Text> </Canvas> 28

34 KONTROL LİSTESİ Bu faaliyet kapsamında aşağıda listelenen davranışlardan kazandığınız beceriler için Evet, kazanamadığınız beceriler için Hayır kutucuğuna (X) işareti koyarak kendinizi değerlendiriniz. Değerlendirme Ölçütleri Evet Hayır 1 Ölçü ve yerleşim özelliklerini düzenlediniz mi? 2 Zıtlık ayarını yaptınız mı? 3 İşaretçi olaylarını düzenlediniz mi? 4 Cursor behaviors özelliğiniz kullandınız mı? 5 Uygulama içindeki hareketleri düzenlediniz mi? DEĞERLENDİRME Değerlendirme sonunda Hayır şeklindeki cevaplarınızı bir daha gözden geçiriniz. Kendinizi yeterli görmüyorsanız öğrenme faaliyetini tekrar ediniz. Bütün cevaplarınız Evet ise Ölçme ve Değerlendirme ye geçiniz. 29

35 ÖLÇME VE DEĞERLENDİRME Aşağıdaki cümlelerde boş bırakılan yerlere doğru sözcükleri yazınız inç.. px(piksel) değerindedir. 2. 1px (piksel).. cm değerindedir pt (point).. inç değerindedir. Aşağıdaki soruları dikkatlice okuyunuz ve doğru seçeneği işaretleyiniz. 4. Simetrik ve mantıksal olarak verilen sırada geçerli olan kısaltılmış değerler aşağıdakilerden hangisidir? A ) Piksel B ) Margin C ) Opacity D ) Stroke 5. Nesnelerde saydamlık için kullanılan bir özellik aşağıdakilerden hangisidir? A ) Cursor Behavior B ) Margin C ) Opacity D ) Stroke 6. Kullanıcılara iyi bir geri besleme sağlamak için ve uygun olan eylem türünü belirtmek için aşağıdakilerden hangisidir? A ) Cursor Behavior B ) Margin C ) Opacity D ) Stroke Aşağıdaki cümlelerin başında boş bırakılan parantezlere, cümlelerde verilen bilgiler doğru ise D, yanlış ise Y yazınız. 7. ( ) Dış çerçeve rengine Stroke denir. 8. ( ) StrokeDashCap, dış çerçeve kalınlığını ayarlan özelliktir. 9. ( )StrokeDashArray, kesikli kenarlarda kesikli çizginin ne kadar boşlukta tekrarlanacağını belirtir. DEĞERLENDİRME Cevaplarınızı cevap anahtarıyla karşılaştırınız. Yanlış cevap verdiğiniz ya da cevap verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız. Cevaplarınızın tümü doğru ise bir sonraki öğrenme faaliyetine geçiniz. 30

36 ÖĞRENME FAALİYETİ 4 AMAÇ Şekil İşlemlerini Gerçekleştiriniz. ARAŞTIRMA Uygulama içinde kullanılan elips şekline ait düzenlemeleri yapmak Uygulama içinde kullanılan dörtgen şekline ait düzenlemeleri yapmak Uygulama içinde kullanılan çizgi şekline ait düzenlemeleri yapmak Uygulama içinde tanımlanan yola ait düzenlemeleri yapmak Geometrik gruplar oluşturmak ve düzenlemek 4. ŞEKİLLER WPF formlarımızda dikdörtgen, kare, elips gibi şekiller oluşturabilirsiniz. Form üzerinde çizimsel işlemler yapmak istediğimizde bu kontrollerin kullanımı önem kazanmaktadır Elips (Ellipse) Elips, daire çizimleri için kullanılır. Aşağıdaki XAML kodunu yazınız. <Grid> <Ellipse Width= 100 Height= 50 Stroke= Blue StrokeThichness= 5 Fill= Yellow HorizontalAlignment= Left VerticalAlignment= Top Margin= 10, 10, 0, 0 /> </Grid> XAML kodunu yazdıktan sonra formunuzda elips şeklinin oluştuğunu görebilirsiniz. 31

37 Resim 4.1 : Ellipse Burada elipse çizerken kullandığınız özellikler ise şunlardır: Stroke: Çerçeve Rengi StrokeThickness: Çerçeve Kalınlığı Fill: Dolgu rengi 4.2. Dikdörtgen (Rectangle) Dikdörtgen, kare çizim için kullanılır. Aşağıdaki XAML kodunu yazınız. <Grid> <Rectangle Width= 200 Height= 100 Fill= Blue Stroke= Black StrokeThickness= 3 /> </Grid> Kodun sonucunda dolgu rengi mavi olan (Fill= Blue ), çerçeve rengi siyah(stroke= Black ) ve çerçeve kalınlığı 3 olan (StrokeThickness= 3 ) bir dikdörtgen oluşacaktır. Resim 4.2 : Dikdörtgen (Rectangle) 1 32

38 Dikdörtgene ait köşelerin yuvarlatılması için RadiusX ve RadiusY özelliklerine değer atanması yeterli olacaktır. <Grid> <Rectangle Width= 200 Height= 100 Fill= Blue RadiusX= 20 RadiusY= 20 Stroke= Black StrokeThickness= 3 /> </Grid> 4.3. Çizgi (Line) Resim 4.3 : Dikdörtgen (Rectangle) 2 Çizgi çizmek için kullanılır. Aşağıdaki XAML kodunu yazınız. <Grid> <Line X1= 250 Y1= 40 X2= 50 Y2= 200 Stroke= Red StrokeThickness= 5 /> </Grid> XAML kodlamanın sonunda çizginin oluştuğunu görebilirsiniz. Burada yer alan X1- Y1- X2- Y2 değerleri, form üzerindeki uzaklıklara göre iki nokta belirlenir. Bu iki nokta birleşerek çizgi oluşturulur. Çizgilerin düz çizgi olması dışında farklı görünmesini StrokeDashArray özelliği ile sağlayabilirsiniz. 33

39 XAML kodunu düzenleyiniz. Resim 4.4 : Line 1. Örneği <Grid> <Line X1= 250 Y1= 40 X2= 50 Y2= 200 StrokeDashArray= 1, 1 Stroke= Red StrokeThickness= 5 Margin= -33, -12, 33, 12 /> < Line X1= 250 Y1= 40 X2= 50 Y2= 200 StrokeDashArray= 4, 3 Stroke= Red StrokeThickness= 5 Margin= -12, -12, 12, 12 /> Resim 4.5 : Line 2. Örneği 4.4. Yol (Path) Temel şekilleri uç uca eklenmesi veya birleştirilmesi ile oluşturulan karmaşık çizimlerdir. XAML kodunu düzenleyiniz Çoklu Geometrik Nesneler (GeometryGroup) Geometrik şekilleri birleştirmek ve kesişimlerini almak için kullanılır. XAML kodunu düzenleyiniz. 34

40 UYGULAMA FAALİYETİ Uygulamanın görsel özelliklerini ihtiyaca uygun şekilde düzenleyiniz. Kullanılan araç ve gereçler: Bilgisayar (PC veya laptop), Projeksiyon, projeksiyon perdesi, yazıcı, gerekli olan yazılımlar, ilgili kitaplar ve dökümanlar İşlem Basamakları Uygulama içinde kullanılan elips şekline ait düzenlemeleri yapınız. Uygulama içinde kullanılan dörtgen şekline ait düzenlemeleri yapınız. Uygulama içinde kullanılan çizgi şekline ait düzenlemeleri yapınız. Öneriler Elips şeklini oluşturunuz. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <Ellipse Fill= #FF63639F Margin= 132, 50, 141, 47 Stroke= Yellow StrokeThickness= 10 /> <Ellipse Fill= #FFD0D0DE HorizontalAlignment= Left Margin= 177, 107, 0, 151 Stroke= Black Widht= 42 /> <Ellipse Fill= #FFD0D0DE HorizontalAlignment= Right Margin= 0, 107, 198, 151 Stroke= Black Widht= 42 /> <Ellipse Fill= #FF Height= 14 Margin= 189, 0, 198, 95 Stroke= Black VerticalAligment= Botton /> <Ellipse Fill= # FF HorizontalAlignment= Left Margin= 240, 124, 0, 151 Stroke= Black Widht= 10 /> </Grid> Dikdörtgen şeklini oluşturunuz. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <Rectangle Fill= # FF HorizontalAlignment= Left Margin= 26, 64, 0, 99 Stroke= Yellow Widht= 149 RadiusX= 20 RadiusY= 42 /> < Rectangle Fill= # FF Margin= 200, 64, 208, 99 Stroke= Black StrokeThickness= 8 /> < Rectangle Fill= #FF HorizontalAlignment= Right StrokeDashArray= 6 StrokeThickness= 5 StrokeDashCap= Flat Margin= 0, 64, 44, 99 RadiusY= 1 Stroke= Black Width= 133 /> </Grid> Dikdörtgen şeklini oluşturunuz. Xaml kodları ile yandaki resimdeki formu oluşturunuz. 35

41 Uygulama içinde tanımlanan yola ait düzenlemeleri yapınız. Geometrik gruplar oluşturmak ve düzenleyiniz. <Grid> <Line X1= 50 X2= 450 Y1= 150 Y2= 150 Stroke= Red StrokeDashArray= 1 StrokeDashCap= Flat StrokeThickness= 5 /> </Grid> Yol şeklini oluşturunuz. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <Path Data= M91, 108, L324.5, z Margin= 77, 51.5, 197.5, 90.5 Stretch= Fill Stroke= Black StrokeThickness= 1 /> </Grid> GeometryGroup şeklini oluşturunuz. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <PathStroke= Black StrokeThickness= 1 Fill= #CCCCFF Margin= 123, 80, 82, 12 > <Path.Data> <GeometryGroup FillRule= EvenOdd > <EllipseGeometry RadiusX= 50 RadiusY= 50 Center= 75, 75 /> <LineGeometry StartPoint= 25, 10 EndPoint= 90,150 > <EllipseGeometry RadiusX= 100 RadiusY= 100 Center= 75, 75 /> 30 /> </Grid> <RectangleGeometry Rect= 30, </Path> </GeometryGroup> </Path.Data> 36

42 KONTROL LİSTESİ Bu faaliyet kapsamında aşağıda listelenen davranışlardan kazandığınız beceriler için Evet, kazanamadığınız beceriler için Hayır kutucuğuna (X) işareti koyarak kendinizi değerlendiriniz Değerlendirme Ölçütleri Evet Hayır Uygulama içinde kullanılan elips şekline ait düzenlemeleri yaptınız mı? Uygulama içinde kullanılan dörtgen şekline ait düzenlemeleri yaptınız mı? Uygulama içinde kullanılan çizgi şekline ait düzenlemeleri yaptınız mı? Uygulama içinde tanımlanan yola ait düzenlemeleri yaptınız mı? 5 Geometrik gruplar oluşturdunuz ve düzenlediniz mi? DEĞERLENDİRME Değerlendirme sonunda Hayır şeklindeki cevaplarınızı bir daha gözden geçiriniz. Kendinizi yeterli görmüyorsanız öğrenme faaliyetini tekrar ediniz. Bütün cevaplarınız Evet ise Ölçme ve Değerlendirme ye geçiniz. 37

43 ÖLÇME VE DEĞERLENDİRME Aşağıdaki soruları dikkatlice okuyunuz ve doğru seçeneği işaretleyiniz. 1. Aşağıdakilerden hangisi daire çizimleri için kullanılır? A ) Rectangle B ) Ellipse C ) Path D ) Line 2. Aşağıdakilerden hangisi Ellipse Width= 100 Height= 50 Stroke= Yellow StrokeThickness= 10 kodlarının doğru açılımıdır? A ) Elips genişliği 100, yüksekliği 50, dış çerçeve rengi sarı, dış çerçeve kalınlığı 10 B ) Daire yüksekliği 100, genişliği 50, dış çerçeve rengi sarı, dış çerçeve kalınlığı 1 C ) Elips yüksekliği 100, genişliği 50, dış çerçeve rengi mavi, dış çerçeve kalınlığı 1 D ) Daire genişliği 100, yüksekliği 50, dış çerçeve rengi mavi, dış çerçeve kalınlığı Aşağıdakilerden hangisi Rectangle Width= 200 Height= 100 Fill= Blue Stroke= Black kodlarının doğru açılımıdır? A ) Elips genişliği 200, yüksekliği 100, iç alan rengi mavi, dış çerçeve rengi siyah B ) Kare genişliği 200, yüksekliği 100, iç alan rengi mavi, dış çerçeve rengi siyah C ) Elips genişliği 200, yüksekliği 100, iç alan rengi mavi, iç çerçeve rengi siyah D ) Kare genişliği 200, yüksekliği 100, iç alan rengi mavi, iç çerçeve rengi siyah 4. Aşağıdakilerden hangisi dikdörtgene ait köşelerin yuvarlatılması için kullanılan koddur? A ) Rectangle B ) Stroke C ) RadiusX D ) Path 5. Aşağıdakilerden hangisi çizgi çizmek için kullanılır? A ) Rectangle B ) Ellipse C ) Path D ) Line 6. Aşağıdakilerden hangisi çizgilerin düz çizgi olması dışında farklı görünmesini sağlayan özelliktir? A ) RadiusX B ) StrokeThickness C ) StrokeDashArray D ) Stroke 7. Aşağıdakilerden hangisi temel şekilleri uç uca eklenmesi veya birleştirilmesi ile oluşturulan karmaşık çizimlerdir? A ) Rectangle B ) Ellipse C ) Path D ) Line 8. Aşağıdakilerden hangisi Geometrik şekilleri birleştirmek ve kesişimlerini almak için kullanılır? A ) Rectangle B ) GeometryGroup C ) Path D ) Line DEĞERLENDİRME Cevaplarınızı cevap anahtarıyla karşılaştırınız. Yanlış cevap verdiğiniz ya da cevap verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız. Cevaplarınızın tümü doğru ise bir sonraki öğrenme faaliyetine geçiniz. 38

44 ÖĞRENME FAALİYETİ 5 AMAÇ Kontrolleri Kullanacaksınız. ARAŞTIRMA Tuval kontrollerini düzenleyiniz Resim kontrollerini düzenleyiniz Metin kontrollerini düzenleyiniz 5. KONTROLLER Her bir kontrol aslında birer sınıf yapısındadır. Kontroller, amaçlarına göre farklı sınıflardan türeyebilir. Kontrolleri anlatırken her kontrolün yapısına değineceğiz. Değinilecek kontoller, tuval(canvas), resim(image), kabartma(glyphs), metin bloğu(textblock) dur Tuval (Canvas) Canvas paneli daha çok grafiksel işlemlerde veya animasyon yapımında tercih edilir. Bunun sebebi, Canvas panelinin içerisine alacağı kontrolü noktasal olarak belirtmesidir. Canvas paneli içerisine alacağı kontrolleri herhangi bir köşeden belirtilen uzaklıktaki noktaya yerleştirir. Canvas paneli içerisine yerleştirilecek her kontrolün Left, Right, Top, Bottom isimli attached property leri vardır. Bu property ler sayesinde bileşenlerin konumu noktasal olarak belirtebiliriz Resim (Image) Resim göstermek için kullanılır. Resim boyutlandırmak için Strecht özelliğini kullanabiliriz Kabartma (Glyphs) eder. Kabartma (Glyphs), sabit metinlerin oluşturulması için kullanılan kümeleri temsil 39

45 Aşağıdaki XAML kodunu yazınız. <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Glyphs Fill="#FF000000" FontUri="Resources/ F9D-DB34-7D odttf" FontRenderingEmSize="18" StyleSimulations="None" OriginX="72.024" OriginY="87.624" UnicodeString="Hello, World!" Indices=",85.333;,64;,57.333;,57.333;,70.667;,30.667;,25.333;,113.33;,70.667;,68;,57.333;, ;"> </Glyphs> </Canvas> 5.4. Metin Bloğu (TextBlock) Metin Bloğu (TextBlock)Akış, içeriği görüntülemek için küçük derecede bir kontrol sağlar. 40

46 UYGULAMA FAALİYETİ Uygulamanın görsel özelliklerini ihtiyaca uygun şekilde düzenleyiniz. Kullanılan araç ve gereçler: Bilgisayar (PCveya laptop), Projeksiyon, projeksiyon perdesi, yazıcı, gerekli olan yazılımlar, ilgili kitaplar ve dökümanlar İşlem Basamakları Tuval kontrollerini düzenleyiniz. Resim kontrollerini düzenleyiniz. Metin kontrollerini düzenleyiniz Öneriler Tuval (Canvas) kontrolünü uygulayınız. Aşağıdaki XAML kodunu yazınız. <Canvas Background= AntiqueWhite > <Rectangle Canvas.Left= 35 Canvas.Top= 80 Height= 200 Width= 200 Stroke= Yellow StrokeThickness= 5 Fill= Red /> <Rectangle Canvas.Left= 160 Canvas.Top= 62 Height= 200 Width= 200 Stroke= Yellow StrokeThickness= 5 Fill= Blue /> <Rectangle Canvas.Left= 272 Canvas.Top= 36 Height= 200 Width= 200 Stroke= Yellow StrokeThickness= 5 Fill= Green /> </Canvas> Resim kontrolünü uygulayınız. Aşağıdaki XAML kodunu yazdıktan sonra resmin geldiğini görebilirsiniz. <Grid> <Image Width= Auto Height= Auto HorizontalAligment= Stretch VerticalAligment= Stretch Source= ResimTaban.jpg Stretch= UniformToFill /> </Grid> Metin Bloğunu(TextBlock) kontrolünü uygulayınız. Aşağıdaki XAML kodunu yazınız. <TextBlock Name="textBlock1" TextWrapping="Wrap"> <Bold>TextBlock</Bold> is designed to be <Italic>lightweight</Italic>, and is geared specifically at integrating <Italic>small</Italic> portions of flow content into a UI. </TextBlock> <Button Width="100" Margin="10">Click Me</Button> <TextBlock Name="textBlock2" TextWrapping="Wrap" Background="AntiqueWhite" TextAlignment="Center"> </TextBlock> <Button Width="100" Margin="10">Click Me</Button> 41

47 KONTROL LİSTESİ Bu faaliyet kapsamında aşağıda listelenen davranışlardan kazandığınız beceriler için Evet, kazanamadığınız beceriler için Hayır kutucuğuna (X) işareti koyarak kendinizi değerlendiriniz. Değerlendirme Ölçütleri Evet Hayır 1 Tuval kontrollerini düzenlediniz mi? 2 Resim kontrollerini düzenlediniz mi? 3 Metin kontrollerini düzenlediniz mi? DEĞERLENDİRME Değerlendirme sonunda Hayır şeklindeki cevaplarınızı bir daha gözden geçiriniz. Kendinizi yeterli görmüyorsanız öğrenme faaliyetini tekrar ediniz. Bütün cevaplarınız Evet ise Ölçme ve Değerlendirme ye geçiniz. 42

48 ÖLÇME VE DEĞERLENDİRME Aşağıdaki soruları dikkatlice okuyunuz ve doğru seçeneği işaretleyiniz. 1. Aşağıdakilerden hangisi içerisine alacağı kontrolleri herhangi bir köşeden belirtilen uzaklıktaki noktaya yerleştiren panele verilen addır? A ) Resim (Image) B ) Tuval (Canvas) C ) Metin Bloğu(TextBlock) D ) Kabartma (Glyphs) 2. Aşağıdakilerden hangisi sabit metinlerin oluşturulması için kullanılan kümeleri temsil eden kontrole verilen addır? A ) Resim (Image) B ) Tuval (Canvas) C ) Metin Bloğu(TextBlock) D ) Kabartma (Glyphs) 3. Aşağıdakilerden hangisi, içeriği görüntülemek için küçük derecede bir kontrol sağlar? A ) Resim (Image) B ) Tuval (Canvas) C ) Metin Bloğu(TextBlock) D ) Kabartma (Glyphs) Aşağıdaki cümlelerde boş bırakılan yerlere doğru sözcükleri yazınız. 4. Resim boyutlandırmak için.. özelliğini kullanabiliriz. 5.. paneli daha çok grafiksel işlemlerde veya animasyon yapımında tercih edilir. 6. Bu. sayesinde bileşenlerin konumu noktasal olarak belirtebiliriz. DEĞERLENDİRME Cevaplarınızı cevap anahtarıyla karşılaştırınız. Yanlış cevap verdiğiniz ya da cevap verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız. Cevaplarınızın tümü doğru ise bir sonraki öğrenme faaliyetine geçiniz. 43

49 ÖĞRENME FAALİYETİ 6 AMAÇ Dönüşüm ve animasyon işlemlerini yapacaksınız. ARAŞTIRMA Uygulama içinde kullanılan nesneler üzerinde gerçekleştiriniz. Döndürme işlemini gerçekleştiriniz. Ölçülendirme işlemini gerçekleştiriniz. Dönüştürme işlemini gerçekleştiriniz. Çarpıtma işlemini gerçekleştiriniz. Matris dönüşümlerini gerçekleştiriniz. Tetikleyicilerle çalışınız Olayları düzenleyiniz Geçmiş ekranını kullanınız Animasyon parametrelerini düzenleyiniz Anahtar çerçevelerle ilgili ihtiyaç duyulan düzenlemeleri gerçekleştiriniz. 6. DÖNÜŞÜM VE ANİMASYON Form uygulamalarında görsel olarak hissedilen eksikliklerden biri de kontrollerin açısal olarak kontrol edilememesidir. Bu sebep ile vektörel oluşumlar veya animasyon oluşturmada çok büyük eksiklikler vardı. Silverlight ta bulunan tüm kontrolleri veya elementleri kolaylıkla transformasyon işlemlerine aktarabiliriz. Temel olarak beş adet transformasyon işlemi vardır. Döndürme (Rotatetransform) Ölçeklendirme (Scaletransform) Dönüşüm (Translatetransform) Çarpıtma (Skewtransform) Matris (Matrixtransform) 6.1. Döndürme(RotateTransform) Silverlight ta bulunan element ve kontrollerin panel içerisindeki bulunuş açılarını değiştirerek rotasyona uğratma işlemlerini, bu transformasyon yöntemi ile gerçekleştirebilirsiniz. 44

50 Rotate Transform un Angle property si, sol üst köşe referans alınarak dönme hareketi gerçekleştirilir. Aşağıdaki XAML kodunu yazınız. <Grid> <ListBox Height= 100 HorizontalAligment= Left Margin= 213, 65, 0, 0 Name= ListBox1 VerticalAligment= Top Width= 120 > <ListBoxItem Content= Galatasaray /> <ListBoxItem Content= Fenerbahçe /> <ListBoxItem Content= Beşiktaş /> <ListBox.RenderTransform> <RotateTransform Angle= 90 ></ RotateTransform> </ListBox.RenderTransform> </ListBox> </Grid> Resim 6.1 : Rotate Transform 6.2. Ölçeklendirme (ScaleTransform) Silverlight ta bulunan element ve kontrollerin boyutlarını yatay ve dikey eksende değiştirerek rotasyona uğratma işlemlerini bu transformasyon yöntemi ile gerçekleştirebilirsiniz. ScaleX ve ScaleY property leri sayesinde yatay ve dikey eksendeki büyüklüklerini belirtebilirsiniz. Aşağıdaki XAML kodunu yazınız. <Grid> <Button Content= Button Height= 23 HorizontalAligment= Left Margin= 79, 160, 0, 0 Name= button1 VerticalAligment= Top Width= 75 > <Button.RenderTransform> <ScaleTransform ScaleX= 3 ScaleY= 2 > </ScaleTransform> </Button.RenderTransform> </Button> 45

51 <Button Content= Button Height= 23 HorizontalAlignment= Left Margin= 91, 110, 0, 0 Name= button2 VerticalAligment= Top Width= 75 /> </Grid> Resim 6.2 : Scale Transform 6.3. Dönüşüm (TranslateTransform) Silverlight ta bulunan element ve kontrollerin boyutlarını yatay ve dikey eksenlerinde istenilen birim kadar öteleyerek rotasyona uğratma işlemlerini bu transformasyon yöntemi ile gerçekleştirebilirsiniz. X ve Y property leri ile öteleme işlemini gerçekleştirebilirsiniz. Aşağıdaki XAML kodunu yazınız. <Grid> <Ellipse Height= 100 HorizontalAlignment= Left Margin= 114, 90, 0, 0 Name= ellipse1 Stroke= Black VerticalAligment= Top Width= 200 Fill= #FF935E5E > <Ellipse.RenderTransform> <TranslateTransform X= 25 Y= 5 > </TranslateTransform> </ Ellipse.RenderTransform> </ Ellipse > </Grid> 46

52 6.4. Çarpıtma (SkewTransform) Resim 6.3 : Translate Transform Silverlight ta bulunan element ve kontrolleri X ve Y eksenlerinde bükerek rotasyona uğratma işlemlerini bu transformasyon yöntemi ile gerçekleştirebilirsiniz. AngleX ve AngleY property leri ile nesneyi X ve Y eksenlerinde tanımlanan açı ile eğebilirsiniz. Aşağıdaki XAML kodunu yazınız. <Grid> <Image Height= 121 HorizontalAlignment= Left Margin= 85,39, 0, 0 Name= image1 Stretch= Fill VerticalAligment= Top Width= 300 Source= /SilverlightApplication3;component/images/P jpg > <Image.RenderTransform> <SkewTransform AngleX= 25 AngleY= 5 /> </ Image.RenderTransform> </ Image > </Grid> Resim 6.4 : Skew Transform 47

53 6.5. Matris (MatrixTransform) Silverlight ta bulunan element ve kontrollere 3x3 matris algoritmaları uygulayabilmek için kullanılan transformasyon yöntemidir. Daha çok resim işleme yöntemlerinde kullanılmaktadır. M11:Matrisin (1,1) elemanıdır. M12: Matrisin (1,2) elemanıdır. M21: Matrisin (2,1) elemanıdır. M22: Matrisin (2, ) elemanıdır. OffsetX: Matrisin (3,1) elemanıdır. OffsetY: Matrisin (3,2) elemanıdır. Aşağıdaki XAML kodunu yazınız. <Grid> <Button Content= Button Height= 23 HorizontalAlignment= Left Margin= 37,20, 0, 0 Name= button1 VerticalAligment= Top Width= 75 > <Button.RenderTransform> <MatrixTransform> <MatrixTransform.Matrix> <Matrix OffsetX= 0.2 OffsetY= 1 M11= 4.2 M12= 2.5 M21= 1 M22= 2 /> </ MatrixTransform.Matrix > </MatrixTransform> </Button.RenderTransform> </Button > </Grid> Resim 6.5 : Matrix Transform 48

54 6.6. Tetikleyiciler (Trigger ve Event Triggerlar) TriggerBase sınıfında türeyen trigger ları daha detaylı bir şekilde diğer bölümlerde inceleyeceksiniz. XAML ile oluşturulan animasyonların ne zaman başlayacağını ya da ne zaman biteceğini trigger lar aracılığıyla belirlenir. Bu işlemler, EventTrigger a bağlı olarak tanımlanan olaylar sayesinde gerçekleştirilir. EventTrigger sınıfının RoutedEvent property si ile animasyonun hangi event ile tetikleyeceği belirtilmektedir. SourceName property si ise hangi nesnenin event ini tetikleyeceğinizi belirler. Aşağıdaki XAML kodunu yazınız. <Grid> <Ellipse Height= 150 HorizontalAlignment= Left Name= ellipse1 Stroke= Black VerticalAligment= Top Width= 200 > < Ellipse.Triggers > <EventTrigger RoutedEvent= Ellipse.MouseEnter > <!Animasyon işlemleri> < EventTrigger > < EventTrigger RoutedEvent= Ellipse.MouseLeave > <!Animasyon işlemleri> </ EventTrigger > </ Ellipse.Triggers > </ Ellipse > </Grid> 6.7. Geçmiş (BeginStoryboard ve Storyboard) Silverlight ta tüm animasyon işlemlerinin gerçekleştiği sınıftır. Storyboary sınıfı TimeLine sınıfından türemiştir. Storyboard sınıfının alt üyeleri sayesinde kontrolün hangi özelliğinin ne derecede değişeceği belirlenir. XAML ile oluşturulan Storyboard elementinin TargetName ve TargetProperty isimli iki attached property si vardır. TargetName, animasyona dahil edilecek nesnenin ismidir. TargetProperty ise nesnenin dependency-property sinin ismidir. Codebehind tarafında progmatik olarak Set-TargetName ve SetTargetProperty metotları ile belirlenir. BeginStoryboard event gerçekleştiği zaman Storyboard u başlatır. Storyboard sınıfının metotlarından bazıları ve işlevleri aşağıdaki gibidir. Begin(): Animasyonu başlatmak için kullanılır. GetCurrnetState(): Animasyon üzerinde mevcut konumu almayı sağlar. GetCurrnetTime(): Animasyon üzerinde mevcut zamanı almayı sağlar. Pause(): Animasyonun duraklatılmasını sağlar. Resume(): Animasyonun duraklatıldıktan sonra, kaldığı yerden devamını sağlar. Stop(): Animasyonun durdurulmasını sağlar. Seek(): TimeSpan türünde bir zaman alır ve animasyonun bu zamana atlamasını sağlar. 49

55 SkipToFill(): Animasyonun sonuna atlama yapmayı sağlar. Animasyonu sonlandırır Animasyon parametreleri Animasyon türleri aşağıda verilmektedir. Double Animation: Temel animasyon türlerinden biri olan DoubleAnimation sınıfı, nesneleri başlangıç ve bitiş değerleri arasında özelliğini değiştirmektedir. Bu değerler Double tipinde ve DependencyProperty si ile başlangıç değeri ve To property si ile bitiş değeri belirlenir. o By property si Form ve To property lerinin değerleri arasındaki artış miktarını belirler. Yani yüksekliği 20 ile 260 arasında olan bir dairenin yüksekliğini belirli aralıklarla 20 birim artırır. o RepeatBehavior property si; animasyonun kaç defa tekrar edeceğini belirler. RepeatBehavior= Forever tanımlanırsa animasyon devamlı tekrar edecektir. Belirli bir sayı kadar tekrar etmesini istersek RepeatBehavior= 3x şeklinde atama yapmanız gerekecektir. o AutoReserve property sine true atanarak, animasyon bittikten sonra animasyonun tersten ilk değerine dönmesi için kullanılır. o Duration property si animasyonun süresini belirlememizi sağlar. Saat, dakika, saniye şeklinde süre verilmesi gerekir. Kısaca Time Line nı belirler. o SpeedRatio property si animasyonun hızını belirler. Herhangi bir değer belirtilmez ise, 1 değerini alır. 10 saniyelik bir animasyonda SpeedRatio property si 5 atanmışsa animasyon 2 saniye sürecektir. ColorAnimation: ColorAnimation sınıfı; IU Element lerin arkaplan renginin farklı bir renge geçişini animasyon olarak sağlamaktadır. ColorAnimation sınıfında From property si ile başlangıç rengi, To property si ile bitiş rengi belirlenir. AutoReserve property sine true atanarak, animasyon bittikten sonra, animasyonun son renkten ilk renge dönmesi sağlanacaktır. PointAnimation: Silverlight ta içerisinde bulunan element ve kontrollerin konumun point türünde animasyon ile değişmesini gerçekleştiren animasyon türüdür Anahtar Çerçeveler (Key Frame) Basit animasyon türlerinde yapılan her from, to ve by üzerinde gerçekleştirilir. Bu animasyonlarda sadece toplam animasyon süresi belirtilebilir, ama süreye müdahale yapılamamaktadır. Key Frame animasyonlar, bir zaman çizgisi üzerinde gerçekleşir. Bu zaman çizgisi üzerinde animasyonun her saniyesine ulaşabilir ve kullanılan nesne üzerinde değişiklik yapılabilir. İşte bir animasyonun süreleri arasında nesneler ile yapılan değişiklikleri Key Frame ler temsil eder. Kısaca Key Frame, animasyondaki kilit karelerdir. Zaman çizgili üzerinde istenilen saniyedeki nesnenin durumunu değiştirmek için o noktaya Key Frame ler arasında kalan parçaları Silverlight doldurur. 50

BİLİŞİM TEKNOLOJİLERİ

BİLİŞİM TEKNOLOJİLERİ T.C. MİLLÎ EĞİTİM BAKANLIĞI BİLİŞİM TEKNOLOJİLERİ GELİŞMİŞ İNTERNET UYGULAMALARINDA TASARIM ARAÇLARI Ankara, 2013 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında

Detaylı

1 SILVERLIGHT A G R fi 2 KONTROLLER 3 DÜZEN PANELLER

1 SILVERLIGHT A G R fi 2 KONTROLLER 3 DÜZEN PANELLER ++SILVERLIGHT-icindekiler 9/12/11 4:17 PM Page vii Ç NDEK LER 1 SILVERLIGHT A G R fi 1 Girifl 1 Windows Presentation Foundation (WPF) Nedir? 2 WPF n Kazand rd klar 3 Silverlight Nedir? 4 Silverlight ile

Detaylı

BİLİŞİM TEKNOLOJİLERİ

BİLİŞİM TEKNOLOJİLERİ T.C. MİLLÎ EĞİTİM BAKANLIĞI BİLİŞİM TEKNOLOJİLERİ VERİ TABANI YÖNETİMSEL FONKSİYONLARI Ankara, 2013 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan

Detaylı

T.C. MİLLÎ EĞİTİM BAKANLIĞI YENİLENEBİLİR ENERJİ TEKNOLOJİLERİ GÖRÜNÜM VE ANİMASYON

T.C. MİLLÎ EĞİTİM BAKANLIĞI YENİLENEBİLİR ENERJİ TEKNOLOJİLERİ GÖRÜNÜM VE ANİMASYON T.C. MİLLÎ EĞİTİM BAKANLIĞI YENİLENEBİLİR ENERJİ TEKNOLOJİLERİ GÖRÜNÜM VE ANİMASYON Ankara, 2013 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan yeterlikleri

Detaylı

ÖĞRENME FAALİYETİ 3 ÖĞRENME FAALİYETİ 3

ÖĞRENME FAALİYETİ 3 ÖĞRENME FAALİYETİ 3 ÖĞRENME FAALİYETİ 3 ÖĞRENME FAALİYETİ 3 AMAÇ Bu öğrenme faaliyeti ile tasarım düzenlemelerini yapabileceksiniz. ARAŞTIRMA Tema ne demektir? Temayı oluşturan ögeler nelerdir? Araştırınız. Arka plan ne demektir?

Detaylı

1 UNIVERSAL WINDOWS UYGULAMA GELIŞTIRMEYE GIRIŞ

1 UNIVERSAL WINDOWS UYGULAMA GELIŞTIRMEYE GIRIŞ İÇİNDEKİLER VII İÇİNDEKİLER 1 UNIVERSAL WINDOWS UYGULAMA GELIŞTIRMEYE GIRIŞ 1 Bu Kitap Kimlere Hitap Ediyor? 1 UWP - Universal Windows Platform Nedir? 2 Universal Windows Geliştirmenin Desteklendiği İşletim

Detaylı

T.C. MİLLÎ EĞİTİM BAKANLIĞI TEKSTİL TEKNOLOJİSİ ÇORAPTA FORM 542TGD503

T.C. MİLLÎ EĞİTİM BAKANLIĞI TEKSTİL TEKNOLOJİSİ ÇORAPTA FORM 542TGD503 T.C. MİLLÎ EĞİTİM BAKANLIĞI TEKSTİL TEKNOLOJİSİ ÇORAPTA FORM 542TGD503 Ankara, 2012 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan yeterlikleri kazandırmaya

Detaylı

Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan yeterlikleri kazandırmaya yönelik olarak

Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan yeterlikleri kazandırmaya yönelik olarak Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan yeterlikleri kazandırmaya yönelik olarak öğrencilere rehberlik etmek amacıyla hazırlanmış bireysel

Detaylı

Ekran 1 : Font Komutları Dosyası ekranı

Ekran 1 : Font Komutları Dosyası ekranı 27 Ekim 2010 Đlgili Versiyon/lar : ETA:SQL, ETA:V.8-SQL Đlgili Modül/ler : ETASQLFORM DĐZAYNLARDA FARKLI FONT LU YAZI TĐPĐ KULLANIMI ETASQL Doküman Düzenleyicisi olan ETASQLFORM.EXE ile Fatura, Sipariş,

Detaylı

7. Çerçeveler. Bu bölümü bitirdiğinizde,

7. Çerçeveler. Bu bölümü bitirdiğinizde, 7. Çerçeveler Bu bölümü bitirdiğinizde, Çerçevelerden oluşan bir WEB sayfası tasarlamayı, İç içe çerçeveler oluşturmayı ve Çerçeveleri isimlendirmeyi, Bağ kurulan dosyaları belirtilen çerçeve içerisinde

Detaylı

5. Tablo İşlemleri. Bu bölümü bitirdiğinizde,

5. Tablo İşlemleri. Bu bölümü bitirdiğinizde, 5. Tablo İşlemleri Bu bölümü bitirdiğinizde, Tablonun nasıl oluşturulduğunu, Satır ve hücrelerin ne olduğunu ve nasıl oluşturulduğunu, Tablonun ve hücrelerin nasıl hizalandığını, Satır veya sütunların

Detaylı

Javascript Geliştiricileri İçin Xaml Ve Microsoft Silverlight

Javascript Geliştiricileri İçin Xaml Ve Microsoft Silverlight Wpf tabanlı (windows presentation foundation) browser eklentisi hakkında bir sunum Nedir? Genel Bakış Uyumluluk Moonlight Lisans XAML Elementler Animasyon Scripting Sonuç 1 Nedir?, web (browser) uygulamaları

Detaylı

GoFeed Kullanıcı Arayüzü

GoFeed Kullanıcı Arayüzü GoFeed Kullanıcı Arayüzü GoFeed temel olarak yayıncıların, reklamverenlerin ürün/fırsat bilgilerine ulaşabildiği feed sistemidir. Yayıncılar oluşturdukları feedler ile kullanıcıları ürünlerin/fırsatların

Detaylı

Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Hazırlayan: İdris Kahraman

Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Hazırlayan: İdris Kahraman 7. Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com Hazırlayan: İdris Kahraman Dreamweaver Dreamweaver en iyi web editör yazılımlarından biridir. Biz tasarım modunda çalışırken,dreamweaver

Detaylı

GİYİM ÜRETİM TEKNOLOJİSİ

GİYİM ÜRETİM TEKNOLOJİSİ T.C. MİLLÎ EĞİTİM BAKANLIĞI GİYİM ÜRETİM TEKNOLOJİSİ ABİYE ELBİSE KALIBI Ankara, 2013 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan yeterlikleri

Detaylı

T.C. MİLLÎ EĞİTİM BAKANLIĞI GRAFİK VE FOTOĞRAF TORS 211GS0046

T.C. MİLLÎ EĞİTİM BAKANLIĞI GRAFİK VE FOTOĞRAF TORS 211GS0046 T.C. MİLLÎ EĞİTİM BAKANLIĞI GRAFİK VE FOTOĞRAF TORS 211GS0046 Ankara, 2012 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan yeterlikleri kazandırmaya

Detaylı

Metin Tabanlı İçerik Oluşturma Araçları

Metin Tabanlı İçerik Oluşturma Araçları Metin Tabanlı İçerik Oluşturma Araçları Microsoft Office Word Kelime işlemci, görsel nesnelerin veya çizimlerin resim ya da arka plan olarak kullanıldığı metinler oluşturabilen, harita ve tablo gibi şekiller

Detaylı

www.elektrikogretmenleri.com

www.elektrikogretmenleri.com DREAMWEAVER DA TABLOLAR KULLANARAK İNDEX SAYFASI HAZIRLAMAK Günümüzde web siteleri Frameset yapısı ve Tablo yapısı kullanarak yapılmaktadır. Frameset (Çerçeve) yapılı web sitelerinde index sayfaları oluşturulduğunda

Detaylı

MODÜL 3 HTML İLE STİL ŞABLONLARI

MODÜL 3 HTML İLE STİL ŞABLONLARI MODÜL 3 HTML İLE STİL ŞABLONLARI Bu modülü bitirdiğinizde; CSS kodlama standartlarına uyarak işlevselliği ve verimliliği artırmak için HTML kodları ile Stil şablonu (CSS) yapılandırmasını gerçekleştireceksiniz.

Detaylı

ASP.NET ile Bir Web Sitesi Oluşturma

ASP.NET ile Bir Web Sitesi Oluşturma 29,30 Eylül 2011 ASP.NET ile Bir Web Sitesi Oluşturma ASP.NET sitesi oluşturmak için File menüsündeki, New açılır listesindeki, Web Site komutuna tıklıyoruz Açılan pencereden C# içindeki ASP.NET Web Site

Detaylı

MS WORD 5. BÖLÜM. Şekil 3. 100. Sayfa Düzeni Sekmesi. Şekil 3. 101. Temalar Grubu

MS WORD 5. BÖLÜM. Şekil 3. 100. Sayfa Düzeni Sekmesi. Şekil 3. 101. Temalar Grubu MS WORD 5. BÖLÜM Bölüm Adı: SAYFA DÜZENİ Bölümün Amacı: Sayfa yapısı ve düzenini değiştirmek. Neler Öğreneceksiniz? Bu bölümü bitiren kişi: 1. Ofis temalarını bilir. 2. Kenar boşluklarını, sayfa yönlendirmesini,

Detaylı

HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır.

HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır. HTML Ders 5 HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır. Kullanıcı ilgili resim veya yazı üzerine

Detaylı

T.C. MİLLÎ EĞİTİM BAKANLIĞI

T.C. MİLLÎ EĞİTİM BAKANLIĞI T.C. MİLLÎ EĞİTİM BAKANLIĞI MEGEP (MESLEKİ EĞİTİM VE ÖĞRETİM SİSTEMİNİN GÜÇLENDİRİLMESİ PROJESİ) SERAMİK VE CAM TEKNOLOJİSİ TIRNAKLI YAPRAK -2 ANKARA 2007 Milli Eğitim Bakanlığı tarafından geliştirilen

Detaylı

T.C. MİLLİ EĞİTİM BAKANLIĞI RAYLI SİSTEMLER SİNYALİZASYON SİSTEMLERİNDEKİ ENERJİ KAYNAKLARI

T.C. MİLLİ EĞİTİM BAKANLIĞI RAYLI SİSTEMLER SİNYALİZASYON SİSTEMLERİNDEKİ ENERJİ KAYNAKLARI T.C. MİLLİ EĞİTİM BAKANLIĞI RAYLI SİSTEMLER SİNYALİZASYON SİSTEMLERİNDEKİ ENERJİ KAYNAKLARI Ankara, 2013 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer

Detaylı

www.elektrikogretmenleri.com

www.elektrikogretmenleri.com FIREWORKS (MENU OLUŞ TURMA) 1 Önce Başlat menüsü Programlar Adobe Web Premium CS3 Adobe Fireworks CS3 kısayol simgesi ile Fireworks programı açılır. 2 Fireworks programı açıldığında Karşımıza gelen Yeni

Detaylı

2. HTML Temel Etiketleri

2. HTML Temel Etiketleri 2. HTML Temel Etiketleri Bu bölümü bitirdiğinizde, HTML ve etiket kavramlarının ne olduğunu, HTML komut yapısını, Örnek bir HTML dosyasının nasıl oluşturulduğunu, Temel HTML etiketlerinin neler olduğunu,

Detaylı

CSS(CASCADING STYLE SHEETS)

CSS(CASCADING STYLE SHEETS) CSS(CASCADING STYLE SHEETS) CSS NEDİR NE İŞE YARAR? Sıralı Sitil Şablonları olarak bilinen CSS Web sayfalarının biçimsel özelliklerini düzenlediğimiz ve yönettiğimiz kodlar bütünüdür. CSS kodları ile sayfamızdaki

Detaylı

HESAP MAKİNASI YAPIMI

HESAP MAKİNASI YAPIMI HESAP MAKİNASI YAPIMI 1..Aşağıdakine benzer görünüm ve butonları hazırlayın. 2. 24. Butonun içerisine aşağıdaki kodları yazın. 3. Yeni bir layer ekleyip Frame1 F9 na aşağıdaki kodları ekleyelim. 4. Butonlardan

Detaylı

Yine benzer şekilde hücreler içine yazılan yazıların renklerini değiştirebiliriz. Bunun için tüm satırı veya sütunu yine fareyle seçmek durumundayız.

Yine benzer şekilde hücreler içine yazılan yazıların renklerini değiştirebiliriz. Bunun için tüm satırı veya sütunu yine fareyle seçmek durumundayız. 2. EKLE SEKMESĐ TABLO EKLEMEK: Sayfamıza tablo eklemek için, TABLO butonuna bastıktan sonra açılan pencereden kaç sütün ve kaç satırlık bir tablo oluşturacağımızı belirliyoruz. Fareyi sürüklemek, tablonun

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 2 HTML 2 Hyper Text Markup Language = Yüksek/İleri Metin İşaretleme Dili Web sayfaları oluşturmak için kullanılan içerik biçimlendirme dilidir. Yüksek/ileri metin

Detaylı

GRAFİK ve ANİMASYON 12. SAHNE DÜZENLENMESİ VE ŞEKİLLERİN KULLANIMI

GRAFİK ve ANİMASYON 12. SAHNE DÜZENLENMESİ VE ŞEKİLLERİN KULLANIMI BÖLÜM 12 12. SAHNE DÜZENLENMESİ VE ŞEKİLLERİN KULLANIMI 12.1. Scene (Sahne ) Sahne, Flash filmini sunulduğu alandır. Flash animasyonu için oluşturulan nesneler ve bu nesnelere ait bütün hareketler bu alanda

Detaylı

2014-2015 EĞİTİM-ÖĞRETİM YILI BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ 6. SINIF 2. DÖNEM 2. SINAV ÇALIŞMA NOTLARI

2014-2015 EĞİTİM-ÖĞRETİM YILI BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ 6. SINIF 2. DÖNEM 2. SINAV ÇALIŞMA NOTLARI 2014-2015 EĞİTİM-ÖĞRETİM YILI BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ 6. SINIF 2. DÖNEM 2. SINAV ÇALIŞMA NOTLARI İşletim Sisteminde Yapılan Uygulamalar Bir Bilgisayarda Hangi İşletim Sistemi Yüklü Olduğunu

Detaylı

Bu modül, Makine Halıcılığı sektöründe hazırlanmış olan sertifika/kurs müfredat programlarındaki yeterlikleri kazandırmayı amaçlayan bireysel öğrenme

Bu modül, Makine Halıcılığı sektöründe hazırlanmış olan sertifika/kurs müfredat programlarındaki yeterlikleri kazandırmayı amaçlayan bireysel öğrenme Bu modül, Makine Halıcılığı sektöründe hazırlanmış olan sertifika/kurs müfredat programlarındaki yeterlikleri kazandırmayı amaçlayan bireysel öğrenme materyalidir. Makine Halıcılığı ile ilgili eğitim alan

Detaylı

MS POWERPOINT 2010. Şekil 111 Powerpoint 2010 Programını Başlatmak

MS POWERPOINT 2010. Şekil 111 Powerpoint 2010 Programını Başlatmak MS POWERPOINT 2010 1.Giriş: PowerPoint, Windows ortamında çalışan bir sunu paket programıdır. Metin, taslak, çizim ve grafikler kullanılarak sunular, slaytlar, broşürler, bildiriler, konuşmacı notları

Detaylı

Temel Bilgisayar Terimleri Yrd. Doç. Dr. Devkan Kaleci

Temel Bilgisayar Terimleri Yrd. Doç. Dr. Devkan Kaleci 1 2 HTML, Hyper Text Markup Language kelimelerinin kısaltılmışıdır. HTML (Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebilen, internet dokümanları oluşturmaya yarayan bir çeşit dildir. HTML

Detaylı

AMAÇ Araçlardaki Kamera Sistemleri

AMAÇ Araçlardaki Kamera Sistemleri SUNU PLANI AMAÇ OPEN CV GÖRÜNTÜ EŞİKLEME KENAR BULMA ŞEKİL BULMA GÖRÜNTÜ GENİŞLETME VE BOZMA GÖRÜNTÜ DOLDURMA AFFİNE DÖNÜŞÜMÜ PERSPEKTİF DÖNÜŞÜM KUŞ BAKIŞI GÖRÜNTÜ DÖNÜŞÜMÜ AMAÇ Araçlardaki Kamera Sistemleri

Detaylı

KELİME İŞLEMCİLERE GİRİŞ 5.SINIF BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ ÇALIŞMA KÂĞIDI

KELİME İŞLEMCİLERE GİRİŞ 5.SINIF BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ ÇALIŞMA KÂĞIDI KELİME İŞLEMCİLERE GİRİŞ 5.SINIF BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ ÇALIŞMA KÂĞIDI Microsoft Office Word programı, Amerika da bulunan ve Bill Gates in sahibi olduğu yazılım firması Microsoft tarafından

Detaylı

Akdeniz Üniversitesi

Akdeniz Üniversitesi F. Ders Tanıtım Formu Dersin Adı Öğretim Dili Akdeniz Üniversitesi Bilgi Teknolojileri Kullanımı Türkçe Dersin Verildiği Düzey Ön Lisans ( ) Lisans (x) Yüksek Lisans( ) Doktora( ) Eğitim Öğretim Sistemi

Detaylı

BİLİŞİM TEKNOLOJİLERİ WEB PROGRAMCISI MODÜLER PROGRAMI (YETERLİĞE DAYALI)

BİLİŞİM TEKNOLOJİLERİ WEB PROGRAMCISI MODÜLER PROGRAMI (YETERLİĞE DAYALI) T.C. MİLLÎ EĞİTİM BAKANLIĞI Hayat Boyu Öğrenme Genel Müdürlüğü BİLİŞİM TEKNOLOJİLERİ WEB PROGRAMCISI MODÜLER PROGRAMI (YETERLİĞE DAYALI) 2013 ANKARA ÖN SÖZ Günümüzde mesleklerin değişim ile karşı karşıya

Detaylı

T.C. MİLLÎ EĞİTİM BAKANLIĞI DENİZCİLİK IĞRIP AVCILIĞI 624B00028

T.C. MİLLÎ EĞİTİM BAKANLIĞI DENİZCİLİK IĞRIP AVCILIĞI 624B00028 T.C. MİLLÎ EĞİTİM BAKANLIĞI DENİZCİLİK IĞRIP AVCILIĞI 624B00028 Ankara, 2011 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan yeterlikleri kazandırmaya

Detaylı

Dinamik Geometri Yazılımlarından Cabri ile Yansıma ve Öteleme Hareketlerinin Öğretimi

Dinamik Geometri Yazılımlarından Cabri ile Yansıma ve Öteleme Hareketlerinin Öğretimi Dinamik Geometri Yazılımlarından Cabri ile Yansıma ve Öteleme Hareketlerinin Öğretimi Suphi Önder BÜTÜNER KTÜ, Fatih Eğitim Fakültesi Đlköğretim Bölümü Doktora Öğrencisi, Akçaabat Atatürk Đlköğretim Okulu

Detaylı

T.C. MİLLÎ EĞİTİM BAKANLIĞI MEGEP (MESLEKİ EĞİTİM VE ÖĞRETİM SİSTEMİNİN GÜÇLENDİRİLMESİ PROJESİ) TESİSAT TEKNOLOJİSİ VE İKLİMLENDİRME

T.C. MİLLÎ EĞİTİM BAKANLIĞI MEGEP (MESLEKİ EĞİTİM VE ÖĞRETİM SİSTEMİNİN GÜÇLENDİRİLMESİ PROJESİ) TESİSAT TEKNOLOJİSİ VE İKLİMLENDİRME T.C. MİLLÎ EĞİTİM BAKANLIĞI MEGEP (MESLEKİ EĞİTİM VE ÖĞRETİM SİSTEMİNİN GÜÇLENDİRİLMESİ PROJESİ) TESİSAT TEKNOLOJİSİ VE İKLİMLENDİRME SOĞUK SU HAZIRLAMA (CHİLLER) GRUBU MONTAJI ANKARA 2008 Milli Eğitim

Detaylı

MATBAA PAKETLEME VE SEVKİYAT

MATBAA PAKETLEME VE SEVKİYAT T.C. MİLLÎ EĞİTİM BAKANLIĞI MATBAA PAKETLEME VE SEVKİYAT 213GIM178 Ankara, 2011 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan yeterlikleri kazandırmaya

Detaylı

Bu modül, Makine Halıcılığı sektöründe hazırlanmış olan sertifika/kurs müfredat programlarındaki yeterlikleri kazandırmayı amaçlayan bireysel öğrenme

Bu modül, Makine Halıcılığı sektöründe hazırlanmış olan sertifika/kurs müfredat programlarındaki yeterlikleri kazandırmayı amaçlayan bireysel öğrenme Bu modül, Makine Halıcılığı sektöründe hazırlanmış olan sertifika/kurs müfredat programlarındaki yeterlikleri kazandırmayı amaçlayan bireysel öğrenme materyalidir. Makine Halıcılığı ile ilgili eğitim alan

Detaylı

MEGEP (MESLEKİ EĞİTİM VE ÖĞRETİM SİSTEMİNİN GÜÇLENDİRİLMESİ PROJESİ)

MEGEP (MESLEKİ EĞİTİM VE ÖĞRETİM SİSTEMİNİN GÜÇLENDİRİLMESİ PROJESİ) T.C. MİLLÎ EĞİTİM BAKANLIĞI MEGEP (MESLEKİ EĞİTİM VE ÖĞRETİM SİSTEMİNİN GÜÇLENDİRİLMESİ PROJESİ) TEKSTİL TEKNOLOJİSİ DÜZ ÖRME PELERİN VE BERE KALIPLARI ANKARA 2008 Milli Eğitim Bakanlığı tarafından geliştirilen

Detaylı

Bu modül, Makine Halıcılığı sektöründe hazırlanmış olan sertifika/kurs müfredat programlarındaki yeterlikleri kazandırmayı amaçlayan bireysel öğrenme

Bu modül, Makine Halıcılığı sektöründe hazırlanmış olan sertifika/kurs müfredat programlarındaki yeterlikleri kazandırmayı amaçlayan bireysel öğrenme Bu modül, Makine Halıcılığı sektöründe hazırlanmış olan sertifika/kurs müfredat programlarındaki yeterlikleri kazandırmayı amaçlayan bireysel öğrenme materyalidir. Makine Halıcılığı ile ilgili eğitim alan

Detaylı

1 Organizasyon Tanımlama

1 Organizasyon Tanımlama İçindekiler 1 Organizasyon Tanımlama... 3 1.1 Şirket Tanımlama... 3 1.2 Kullanıcı Tanımlama... 3 1.3 İş Akışında Kullanılacak Grup/Birimlerin Oluşturulması... 3 1.4 Oluşturulan Grup/Birim Altına Kullanıcı

Detaylı

Grafik Tasarım Serkan AKSU http://www.serkanaksu.net. Photoshop CS5. 1.1 Araçlar

Grafik Tasarım Serkan AKSU http://www.serkanaksu.net. Photoshop CS5. 1.1 Araçlar Photoshop CS5 1.1 Araçlar Photoshop'u başlattığınızda, Araçlar paleti ekranın sol tarafında gösterilir. Araçlar paletindeki bazı araçların bağlama duyarı seçenekler çubuğunda gösterilen seçenekleri vardır.

Detaylı

Teknik Doküman. Autodesk Revit Building te yeni ölçü tipleri yaratmak

Teknik Doküman. Autodesk Revit Building te yeni ölçü tipleri yaratmak Teknik Doküman Teknik Doküman Numarası: 10771 Yayım Tarihi: 24.03.2006 Ürün: Autodesk Revit 6-9 Konu: Revit te yeni ölçülendirme tipleri yaratmak Tür: Öğretici Revizyon No: 0 Revizyon Tarihi: Autodesk

Detaylı

TEKNİK RESİM DERSİ Dersin Modülleri Kazandırılan Yeterlikler

TEKNİK RESİM DERSİ Dersin Modülleri Kazandırılan Yeterlikler TEKNİK RESİM DERSİ Dersin Modülleri Geometrik Çizimler Görünüş Çıkarma Kazandırılan Yeterlikler Geometrik çizimleri yapmak Yeterli ve kesit görünüşler çizmek DERS BİLGİ FORMU DERSİN ADI ALAN MESLEK / DAL

Detaylı

ÖĞRENME FAALİYETİ 5 ÖĞRENME FAALİYETİ 5 5. TABLO İŞLEMLERİ

ÖĞRENME FAALİYETİ 5 ÖĞRENME FAALİYETİ 5 5. TABLO İŞLEMLERİ ÖĞRENME FAALİYETİ 5 AMAÇ ÖĞRENME FAALİYETİ 5 Bu faaliyette verilen bilgiler ile hazırlanan belgeye uygun tablo oluşturacak, tablo biçimlendirme işlemlerini hatasız yapabileceksiniz. ARAŞTIRMA 5.1. Tablo

Detaylı

T.C. MİLLÎ EĞİTİM BAKANLIĞI MEGEP (MESLEKÎ EĞİTİM VE ÖĞRETİM SİSTEMİNİN GÜÇLENDİRİLMESİ PROJESİ) KONAKLAMA VE SEYAHAT HİZMETLERI

T.C. MİLLÎ EĞİTİM BAKANLIĞI MEGEP (MESLEKÎ EĞİTİM VE ÖĞRETİM SİSTEMİNİN GÜÇLENDİRİLMESİ PROJESİ) KONAKLAMA VE SEYAHAT HİZMETLERI T.C. MİLLÎ EĞİTİM BAKANLIĞI MEGEP (MESLEKÎ EĞİTİM VE ÖĞRETİM SİSTEMİNİN GÜÇLENDİRİLMESİ PROJESİ) KONAKLAMA VE SEYAHAT HİZMETLERI BİLGİSAYARDA DÖKÜMAN HAZIRLAMA ANKARA 2006 Milli Eğitim Bakanlığı tarafından

Detaylı

Temel Bilgi Teknolojileri - II Ayrıntılı Ders İçerikleri

Temel Bilgi Teknolojileri - II Ayrıntılı Ders İçerikleri Temel Bilgi Teknolojileri - II Ayrıntılı Ders İçerikleri Hesap Tabloları(Excel 2007) HAFTA 1 1. Hesap Tablolarına Giriş 1.1. Hesap tablosu tanımı, kullanım amacı ve yerleri 1.2. MS Excel Uygulamasına giriş

Detaylı

Bo lu m 7: Hesap Tabloları

Bo lu m 7: Hesap Tabloları Bo lu m 7: Hesap Tabloları Konu 1: Dosya, Tablo ve Grafik Oluşturma Hazırlayan: S.Engin Koç Bu konu bittiğinde; Dosya oluşturma ve tabloya şekil verme Tabloya sütun, satır ekleme ve hücreleri biçimlendirme

Detaylı

Windows Live Movie Maker

Windows Live Movie Maker Windows Live Movie Maker Nedir? Movie Maker ile, bilgisayarınızda yer alan fotoğraf ve videolarınızı kullanarak, bunlar üzerinde düzenlemeler, değişiklikler yapabilir, müzik dosyaları ekleyebilir, mikrofon

Detaylı

HALI ÜRETİM TEKNOLOJİSİ

HALI ÜRETİM TEKNOLOJİSİ T.C. MİLLÎ EĞİTİM BAKANLIĞI HALI ÜRETİM TEKNOLOJİSİ MAKAS TIRAŞ MAKİNESİNİ ÜRETİME HAZIRLAMA Gaziantep, 2015 Bu modül, Makine Halıcılığı sektöründe hazırlanmış olan sertifika/kurs müfredat programlarındaki

Detaylı

ECDL ImageMaker Müfredat

ECDL ImageMaker Müfredat ECDL ImageMaker Müfredat Test Hedefleri: ECDL ImageMaker testi bir görüntü işleme uygulaması kullanarak Adayın yetkin olmasını ve sayısal görüntülerin altında yatan ana kavramların bazılarını anlamasını

Detaylı

Video Hazırlama Programı ile Öğretim Materyali Oluşturulması

Video Hazırlama Programı ile Öğretim Materyali Oluşturulması Öğretim Teknolojileri Destek Ofisi Instructional Technology Support Office Video Hazırlama Programı ile Öğretim Materyali Oluşturulması Orta Doğu Teknik Üniversitesi Middle East Technical University İletişim

Detaylı

Doküman Versiyon : 1.01.02 Tarih : 06.02.2013

Doküman Versiyon : 1.01.02 Tarih : 06.02.2013 Yardım Dosyası Doküman Versiyon : 1.01.02 Tarih : 06.02.2013 1 1 - Çalışma Şekli Hakkında Kısa Bilgi AKINSOFT WOLVOX ve OctoPlus programları içerisinde Argox marka etiket yazıcı kullanarak stoklarınız

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 4 Sayfalara Resim Eklemek 2 Etiketi Sayfaya resim eklemek için kullanılır. JPG, BMP, GIF, PCX, PNG, TIFF, WMF gibi resim formatlarını destekler. Sonlandırmalı

Detaylı

Karabük Üniversitesi, Mühendislik Fakültesi...www.ibrahimcayiroglu.com

Karabük Üniversitesi, Mühendislik Fakültesi...www.ibrahimcayiroglu.com HTML-2 Tablolar Tablolar sayfaları satırlara ve sütunlara bölmek yada metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak için kullanabileceğimiz en önemli elemanlardır. Tablolar satır

Detaylı

GÖRSEL EKRAN TASARIMI (VISUALIZATIONS)

GÖRSEL EKRAN TASARIMI (VISUALIZATIONS) GÖRSEL EKRAN TASARIMI (VISUALIZATIONS) Visualizations sekmesi, PLC programlarına görsel arayüz tasarlamak için kullanılır. Ancak dokunmatik (touch) panellerin çoğu bu görsel arayüzü desteklememektedirler.

Detaylı

3. Metin ve Görünüm Etiketleri

3. Metin ve Görünüm Etiketleri 3. Metin ve Görünüm Etiketleri Bu bölümü bitirdiğinizde, Metin biçimlendirme etiketlerinin neler olduğunu ve nasıl kullanıldığını, Yatay çizginin nasıl çizildiğini ve özelliklerinin neler olduğunu, Satır

Detaylı

BİLİŞİM TEKNOLOJİLERİ ALANI

BİLİŞİM TEKNOLOJİLERİ ALANI BİLİŞİM TEKNOLOJİLERİ ALANI Okulumuzda Bilişim Teknolojileri Alanında şu an Web Programcılığı ve Ağ İşletmenliği dalları bulunmaktadır. Yeni eğitim öğretim yılında diğer dalların açılması düşünülmektedir.

Detaylı

Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html. örnek17.html

Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html. örnek17.html HTML Ders 7 Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html örnek17.html htm1.html htm1.html ... Çerçeve oluşturmada

Detaylı

Size-Hardness ayarları yapılabilmektedir.

Size-Hardness ayarları yapılabilmektedir. Clone Stamp Tool: Örnek alınan yeri kopyalamak için kullanılır. Araç seçildikten sonra alt tuşuna basılarak örnek alınacak yere fare ile tıklanır. Daha sonra da alınan örnek nereye aktarılmak isteniyorsa

Detaylı

2 TEMEL ÇİZİM KOMUTLARI

2 TEMEL ÇİZİM KOMUTLARI İÇİNDEKİLER ÖNSÖZ III Bölüm 1 AUTOCAD E GİRİŞ 11 1.1.Autocad Programının Kurulumu 12 1.2.Autocad Çizim Ortamının Tanıtılması 13 1.3.Dosyalama İşlemleri 17 1.3.1Yeni Dosya Açma (NEW) 17 1.3.2 Eski Bir Çizim

Detaylı

MICROSOFT OFFİCE WORD PROGRAMI DOSYA İŞLEMLERİ

MICROSOFT OFFİCE WORD PROGRAMI DOSYA İŞLEMLERİ MICROSOFT OFFİCE WORD PROGRAMI Ms Word bir kelime işlemci programıdır. İçinde bulunan detaylı metin biçimlendirme seçenekleri, ayrıntılı tablo, şekil ve grafik oluşturma başarıları nedeniyle, kendi türünde

Detaylı

ÜNİTE 1: KELİME İŞLEMCİ PROGRAMI

ÜNİTE 1: KELİME İŞLEMCİ PROGRAMI ÜNİTE 1: KELİME İŞLEMCİ PROGRAMI Kelime İşlemci Nedir? Bilgisayarda yazıların(metinlerin) yazılmasını ve düzenlenebildiği, resimlerin ve tabloların eklenebildiği yazılımların(programların) genel adıdır.

Detaylı

BĐLGĐSAYARDAN BAĞIMSIZ YAZDIRMA ĐŞLEMĐ

BĐLGĐSAYARDAN BAĞIMSIZ YAZDIRMA ĐŞLEMĐ BĐLGĐSAYARDAN BAĞIMSIZ YAZDIRMA ĐŞLEMĐ Argox X-2000+ barkod / etiket yazıcısını bilgisayardan bağımsız kullanabilmek için Argox X-2000+ barkod / etiket yazıcısı ile birlikte verilen CD içerisinde bulunan

Detaylı

Dr. Fatih BARUTÇU GIDA TARIM VE HAYVANCILIK BAKANLIĞI EĞİTİM YAYIM VE YAYINLAR DAİRESİ BAŞKANLIĞI HİZMET İÇİ EĞİTİM PROGRAMLARI MÜFREDATLARI BÖLÜM I

Dr. Fatih BARUTÇU GIDA TARIM VE HAYVANCILIK BAKANLIĞI EĞİTİM YAYIM VE YAYINLAR DAİRESİ BAŞKANLIĞI HİZMET İÇİ EĞİTİM PROGRAMLARI MÜFREDATLARI BÖLÜM I Versiyon Tarih Hazırlayanlar Tanımlama 1 25.11.2014 Emre ERDEM Dr. Fatih BARUTÇU Antalya-Alanya Hizmet İçi Değerlendirme Toplantısında düzenlenmiştir. BÖLÜM I Hizmet İçi Eğitim Programının Adı Genel Amacı

Detaylı

WEB TASARIMI VE PROGRAMLAMA DERSİ

WEB TASARIMI VE PROGRAMLAMA DERSİ WEB TASARIMI VE PROGRAMLAMA DERSİ Dersin Modülleri HTML 1 HTML 2 Web Tasarım Editörü 1 Web Tasarım Editörü 2 Web Tasarım Editörü 3 Web Tasarım Editörü 4 Etkileşimli Web Uygulamaları 1 Etkileşimli Web Uygulamaları

Detaylı

T.C. MİLLÎ EĞİTİM BAKANLIĞI HALI ÜRETİM TEKNOLOJİSİ HALIYI RULO OLARAK SARMA

T.C. MİLLÎ EĞİTİM BAKANLIĞI HALI ÜRETİM TEKNOLOJİSİ HALIYI RULO OLARAK SARMA T.C. MİLLÎ EĞİTİM BAKANLIĞI HALI ÜRETİM TEKNOLOJİSİ HALIYI RULO OLARAK SARMA Gaziantep, 2015 Bu modül, Makine Halıcılığı sektöründe hazırlanmış olan sertifika/kurs müfredat programlarındaki yeterlikleri

Detaylı

BİLGİSAYARDA OFİS PROGRAMLARI BİÇİMLENDİRME

BİLGİSAYARDA OFİS PROGRAMLARI BİÇİMLENDİRME BİLGİSAYARDA OFİS PROGRAMLARI BİÇİMLENDİRME Büro Yönetimi Öğretmeni Fatma GEZ BİÇİMLENDİRME Yazmış olduğumuz metinleri farklı boyut, renk, yazı tipi vb. özelliklerde yazabilmek için biçimlendirme işlemi

Detaylı

SKETCHUP PROGRAMI ARAÇLAR VE GÖREVLERİ

SKETCHUP PROGRAMI ARAÇLAR VE GÖREVLERİ SKETCHUP PROGRAMI ARAÇLAR VE GÖREVLERİ Sketchup programı, üç boyutlu çizimler yapmamızı sağlayan bir programdır. Line (Çizgi) Aracı; çalışma ekranında düz çizgi oluşturmaya yarar. Select (Seçim) aracı;

Detaylı

Flash ile Etkileşimli Öğretim Materyali Hazırlama Semineri

Flash ile Etkileşimli Öğretim Materyali Hazırlama Semineri Öğretim Teknolojileri Destek Ofisi Instructional Technologies Support Office Flash ile Etkileşimli Öğretim Materyali Hazırlama Semineri III. Oturum Orta Doğu Teknik Üniversitesi Middle East Technical University

Detaylı

Aşağıdaki örnekte, aynı düzen tablosu ve hücreleri içerikle birlikte gösterilmektedir.

Aşağıdaki örnekte, aynı düzen tablosu ve hücreleri içerikle birlikte gösterilmektedir. 12 DÜZEN TABLOLARI Microsoft Office FrontPage 2003 programında düzen tabloları ve hücrelerini kullanarak, profesyonel görünümlü Web sayfası düzenleri oluşturabilirsiniz. Düzen tablosu, sayfa düzeni için

Detaylı

ÖĞRENME FAALĠYETĠ 1 ÖĞRENME FAALĠYETĠ 1

ÖĞRENME FAALĠYETĠ 1 ÖĞRENME FAALĠYETĠ 1 ÖĞRENME FAALĠYETĠ 1 AMAÇ ÖĞRENME FAALĠYETĠ 1 WPF Formları ile çalıģabileceksiniz. ARAġTIRMA ĠĢletim sisteminde çeģitli uygulamalara ait arayüz tasarımlarını inceleyiniz.herhangi bir programa ait arayüzü

Detaylı

Probina Orion Modelleme Teknikleri

Probina Orion Modelleme Teknikleri Şubat 2009 KULLANIM HAKLARI PROTA YAZILIM BİLİŞİM ve MÜHENDİSLİK LTD. ŞTİ. ODTÜ Teknokent Teknoloji Geliştirme Bölgesi Galyum Blok No: 20 ANKARA Tel: (312) 210 17 88 Fax: (312) 210 17 86 Email: probina@prota.com.tr

Detaylı

Maltepe Üniversitesi Bilgisayar Mühendisliği Bölümü Internet ve Bilgi Teknolojileri (BİL 309) Dersi

Maltepe Üniversitesi Bilgisayar Mühendisliği Bölümü Internet ve Bilgi Teknolojileri (BİL 309) Dersi Maltepe Üniversitesi Bilgisayar Mühendisliği Bölümü Internet ve Bilgi Teknolojileri (BİL 309) Dersi GENEL DERS BİLGİLERİ Öğretim Elemanı Ofis : MUH 312 : Öğr. Gör. Dr. T.Tugay BİLGİN Ofis Saatleri : Pazartesi:

Detaylı

5.1. Temalar, Kenar Boşlukları, Yönlendirme, Boyutlar, Yazdırma Alanı, Arka Plan

5.1. Temalar, Kenar Boşlukları, Yönlendirme, Boyutlar, Yazdırma Alanı, Arka Plan 5. SAYFA DÜZENİ 5.1. Temalar, Kenar Boşlukları, Yönlendirme, Boyutlar, Yazdırma Alanı, Arka Plan Excel de Temalar, Renkler, Yazı Tipi ve Efektler Sayfa Düzeni sekmesinin ilk grubu olan Temalar grubunun

Detaylı

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) CSS, bir HTML elemanının nasıl görüneceğini belirleyen kurallar tanımlamamızı sağlayar. Örneğin: Sayfanın arka planının

Detaylı

Kullanım Kılavuzu Milli Eğitim Bakanlığı 2010

Kullanım Kılavuzu Milli Eğitim Bakanlığı 2010 Kullanım Kılavuzu Milli Eğitim Bakanlığı 2010 Bu belge BT Sınıfı Etkinliklerinde Kullanılmak Üzere Hazırlanmıştır İÇİNDEKİLER GİRİŞ... 3 ÜYE (KAYIT) OLMA... 3 YÖNETİM PANELİ İŞLEMLERİ... 5 ŞABLON AYARLARI...

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 5

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 5 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 5 Stil Oluşturmak/CSS 2 CSS, Cascading Style Sheets = Katmanlı Biçim Sayfaları HTML nesnelerini biçimlendirmek için kullanılır. CSS Bileşenleri CSS yapısı 3 ana bileşenden

Detaylı

WEB TASARIMI VE PROGRAMLAMA

WEB TASARIMI VE PROGRAMLAMA WEB TASARIMI VE PROGRAMLAMA MODÜL ADI SÜRESİ TASARIMIN TEMEL İLKELERİ 40/8 HTML İLE BASİT WEB İŞLEMLERİ 40/32 HTML İLE GELİŞMİŞ WEB İŞLEMLERİ 40/32 STİL ŞABLONU (CSS) 40/32 WEB TASARIM EDİTÖRÜNE GİRİŞ

Detaylı

T.C. MİLLÎ EĞİTİM BAKANLIĞI

T.C. MİLLÎ EĞİTİM BAKANLIĞI T.C. MİLLÎ EĞİTİM BAKANLIĞI MEGEP (MESLEKÎ EĞİTİM VE ÖĞRETİM SİSTEMİNİN GÜÇLENDİRİLMESİ PROJESİ) İNŞAAT TEKNOLOJİSİ CAM VE CAM ÇITASI ANKARA 2006 Milli Eğitim Bakanlığı tarafından geliştirilen modüller;

Detaylı

Üst menüden Modify Document, Sahnemizin boyutu,arka plan rengi,frame rate: saniyede görünme değeri( normali 25 civarı ) OK

Üst menüden Modify Document, Sahnemizin boyutu,arka plan rengi,frame rate: saniyede görünme değeri( normali 25 civarı ) OK Flash : Düzenleme dosyası fla,bunu swf ye çevirip internette yayınlıyoruz.bunun görülebilmesi için Bilgisayarda adop flash player yüklü olmalı. Masa üstünde animasyonlar klasörü var. 24 Kasım 2011 / Perşembe

Detaylı

www.elektrikogretmenleri.com

www.elektrikogretmenleri.com DREAMWEAVERDA NESNELERE DAVRANIŞ EKLEME Dreamweaver da fare hareket olaylı, animasyonlu görüntüler oluşturmak istenildiğinde hazır scriptler anlamına gelen Davranışlar(behaviors) kullanılmaktadır. Yukarıdaki

Detaylı

13 Aralık 2007. Đlgili Versiyon/lar : ETA:SQL, ETA:V.8-SQL. Đlgili Modül/ler : Raporlar. Kullanıcı Tanımlı Raporlar Bölümünden Yapabildiklerimiz

13 Aralık 2007. Đlgili Versiyon/lar : ETA:SQL, ETA:V.8-SQL. Đlgili Modül/ler : Raporlar. Kullanıcı Tanımlı Raporlar Bölümünden Yapabildiklerimiz 13 Aralık 2007 Đlgili Versiyon/lar : ETA:SQL, ETA:V.8-SQL Đlgili Modül/ler : Raporlar KULLANICI TANIMLI RAPORLAR Kullanıcı Tanımlı Raporlar Bölümünden Yapabildiklerimiz Kendi isteklerinize özel rapor tasarımları

Detaylı

2- Kontrol Sil... 17. 3-En Öne Getir... 13 4-En Arkaya Gönder... 13 4.5.8.2 Resim... 14. 1-Özellikler:... 18 Genel Özellikler...

2- Kontrol Sil... 17. 3-En Öne Getir... 13 4-En Arkaya Gönder... 13 4.5.8.2 Resim... 14. 1-Özellikler:... 18 Genel Özellikler... i İçindekiler Kullanıcı Giriş Ekranı... 1 Ana Sayfa... 2 1-Projeler... 3 1.1 Yeni Proje... 3 1.2 Proje Düzenle... 3 1.3 Proje Sil... 3 1.4 Listeyi Güncelle.... 3 2-Gruplar... 4 2.1.1 Grup Adı.... 5 2.1.2

Detaylı

Enlil programını açtığımızda karşımıza gelen ilk ekrandır.bu ekranda özel tanımlanmış kullanıcı kodu ve parola ile programa giriş sağlanmaktadır.

Enlil programını açtığımızda karşımıza gelen ilk ekrandır.bu ekranda özel tanımlanmış kullanıcı kodu ve parola ile programa giriş sağlanmaktadır. Enlil programını açtığımızda karşımıza gelen ilk ekrandır.bu ekranda özel tanımlanmış kullanıcı kodu ve parola ile programa giriş sağlanmaktadır. Özel tanımlanmış kullanıcı kodu ve parola girildikten sonra

Detaylı

ÖNDER BİLGİSAYAR KURSU. Microsoft Office Kursu Eğitim İçeriği

ÖNDER BİLGİSAYAR KURSU. Microsoft Office Kursu Eğitim İçeriği ÖNDER BİLGİSAYAR KURSU Microsoft Office Kursu Eğitim İçeriği Microsoft WORD 1. PENCERE ELEMANLARI VE GÖRÜNTÜLEME BİÇİMLERİ 1.1. Genel Bilgiler 1.2. Ekran Görünümleri 1.3. Metin Sınırları ve Basımda Çıkmayan

Detaylı

sayfa Başlığı Bu benim ilk sayfam bu metin koyu

<html> <head> <title>sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>bu metin koyu</b> </body> </html> HTML'e Giriş 1. HTML dosyası nedir? HTML'in açılımı Hyper Text Markup Language (Bunun tam Türkçe'si bulunmamakla beraber "çok yere açılan metin" denebilir. Bir HTML dosyası bir text dosyası olmakla beraber

Detaylı

Ekran 1: Ziraat Bankasından alınan Excel formatındaki ZIRAATBANKASI.XLS isimli dosya

Ekran 1: Ziraat Bankasından alınan Excel formatındaki ZIRAATBANKASI.XLS isimli dosya 16 Ocak 2010 Đlgili Versiyon/lar : ETA:SQL, ETA:V.8-SQL BANKA EKSTRELERĐ Đlgili Modül/ler : Banka, Cari, Muhasebe BANKA EKSTRELERĐNĐN MUHASEBE, CARĐ VE BANKA FĐŞLERĐNE AKTARILMASI Banka hesap ekstrelerinin

Detaylı

TEKNİK RESİM. Ders Notları: Mehmet Çevik Dokuz Eylül Üniversitesi. Çizgiler Yazılar Ölçek

TEKNİK RESİM. Ders Notları: Mehmet Çevik Dokuz Eylül Üniversitesi. Çizgiler Yazılar Ölçek TEKNİK RESİM 2010 Ders Notları: Mehmet Çevik Dokuz Eylül Üniversitesi 2/21 Çizgi Tipleri Kalın Sürekli Çizgi İnce Sürekli Çizgi Kesik Orta Çizgi Noktalıİnce Çizgi Serbest Elle Çizilen Çizgi Çizgi Çizerken

Detaylı

BÖLÜM 8 B- SUNU PROGRAMI 1. MICROSOFT POWERPOINT NEDİR? 2. POWERPOINT PROGRAMININ BAŞLATILMASI

BÖLÜM 8 B- SUNU PROGRAMI 1. MICROSOFT POWERPOINT NEDİR? 2. POWERPOINT PROGRAMININ BAŞLATILMASI BÖLÜM 8 B- SUNU PROGRAMI 1. MICROSOFT POWERPOINT NEDİR? Microsoft Office Paketi ile birlikte kullanıcıya sunulan Powerpoint Programı, etkileşimli sunular (Presentation) hazırlamaya yarayan metin tabanlı

Detaylı

Çözüm Bilgisayar. Çözüm İntSite

Çözüm Bilgisayar. Çözüm İntSite Çözüm Bilgisayar Çözüm İntSite Çözüm İnternet Site Programı (intsite.exe) Firmamızca geliştirilen ve Çözüm HBYS programının ana modülü olan Hasta Takip modülünü kullanan tüm hastanelerin kullanabileceği

Detaylı

Akdeniz Üniversitesi

Akdeniz Üniversitesi F. Ders Tanıtım Formu Dersin Adı Öğretim Dili Akdeniz Üniversitesi Bilgi ve İletişim Teknolojisi Türkçe Dersin Verildiği Düzey Ön Lisans (x) Lisans ( ) Yüksek Lisans( ) Doktora( ) Eğitim Öğretim Sistemi

Detaylı