SASS – Nedir? Visual Studio 2013 ile Entegrasyon

SASS-Syntactically Awesome StyleSheets

Syntactically Awesome StyleSheet…

SASS Nedir? ile SASS video serimize başlıyoruz. Sizlere bu video seri ile SASS ‘ın ne olduğu ve Visual Studio 2013 ile nasıl kullanılabileceğini anlatacağım. Serimizi takip eden videolarda da örneklerle beraber SASS ‘ın en belirgin özelliklerini size aktarıyor olacağım. SASS’ ı Visual Studio olmadan kullanmak isterseniz ücretli ya da ücretsiz(open source) uygulamaları bulunmaktadır. SASS ‘a ait sitedeki install başlığından bu uygulamaları görebilir ve ilgili web sayfalarına giderek indirebilirsiniz. Visual studio 2012 ve 2013 ile kullanmak isterseniz gerekli extension’ı kurmanız gerekmektedir. İster Visual Studio içindeki Tools –> Extension & Updates kısmından isterseniz de aşağıdaki web sayfasından SassyStudio isimli extension’ı indirerek kurabilirsiniz.

SASS dosyalarının uzantısı “.scss” şeklindedir. Visual studio kullanarak oluşturduğunuz bir web projesine sağ tıklayarak Add –> Add New Item diyerek Sass File ekleyebilirsiniz. Bir de Sass Partial File isimli bir dosya daha göreceksiniz. Bu dosyanın normal sass dosyadan farkı yoktur. Dosya adının başındaki “_”(alt çizgi) bu dosyanın önemli kısmıdır. Bu o dosyanın başka projelerde de kullanılabilecek olan bir kod parçası olarak işaretlendiğini belirtir. Yani Sass File’lara birden fazla daha önce yazmış olduğunuz sass partial file import edebilirsiniz.

Örnek bir SASS kodunu da giriş videosu yazımızda sizlerle paylaşmak istiyorum.

$yazi-tipim:    Helvetica, sans-serif; 
$ana-renk: #333;

body { 
    font: 100% $yazi-tipim; 
    color: $ana-renk; 
}

Buradaki kodlamada; sass file üzerinde değişken tanımlamayı görüyorsunuz. “$” simgesini değişken isminin önüne yazarak değişken tanımlıyoruz ve kullanırken de gene “$” simgesini kullanarak istediğimi yerde kullanıyoruz. Formül şu şekilde;

$[değişken_adı] : [değer] ;

Bu örnek sass dosyasını derlediğimizde(compile) – visual studio içinde kaydettiğimiz anda derlenmiş oluyor “.css” dosyamız oluşturuluyor.

body { 
    font: 100% Helvetica, sans-serif; 
    color: #333; 
}

Derleme sonrası; tanımladığımız değişkenleri kullandığımız yerde değişkenin değerlerinin yazıldığını görebilirsiniz. Tabii ki bu sass dosyalarının basit bir özelliği, çok daha fazlası ve gelişmiş yetenekleri var. Bunları ilerleyen videolarımızda sizlere anlatmaya çalışacağım. Bu giriş videosu için bu şekilde bir yazıyı yazarak da sizler için konuya giriş yapmış oluyorum. Video ile sizleri başbaşa bırakıyorum.

kmb-udemy-reklam

Dosya Bilgisi Kaydedici (File Info Writer)

Bu video da, bir klasör içerisindeki dosya ve klasör hiyerarşisini bir dosyaya formatlı bir şekilde yazan bir programın geliştirilmesini anlattım. Bu örnek ile bilgilerinizi geliştirebilir ve bu örneği daha ileri noktalara götürebilirsiniz.

OOP–Formlar Arası İletişim

Önceki yıllarda kaydettiğim ve paylaştığım. Fakat paylaştığım servis tarafından genel de bandwidth limitinden dolayı pek fazla erişilemeyen bu video’yu tekrar bloğumda paylaşmak istiyorum. Faydalanmak isteyen arkadaşlara faydalı olması dileğimle..

kmb-udemy-reklam

ALM Summit 2013

ALM Summit 2013

Geçtiğimiz günlerde gerçekleşen ALM Summit’i kaçırdıysanız, videoları Channel 9’da. İzlemek için hemen tıklayın.

Zenith Bilişim – HTML 5 Eğitimi

Kaynak : http://merhanersoy.net/

image

Süre : 12 saat
Eğitim Günler : Hafta sonu Cumartesi-Pazar 09-00 : 15:00 arası
Başlangıç Tarihi : 3 Mart 2012 Cumartesi
Eğitim Yeri : Kadıköy, Hasanpaşa
Eğitmen : Mustafa Erhan Ersoy (http://merhanersoy.net)

 

 

Eğitimde konuları :

HTML5 nedir ?
HTML5 markup, doküman yapısı
Yeni form tagları ve form doğrulama.
Video ve Audio tagları ile multimedia.
HTML5 Canvas.
Local storage, session storage ve Web SQL Veritabanları ile veri saklama.
HTML5 ile caching ve offline içerik.
HTML5 Geolocation API.
HTML5 Web Messaging API.
Web Workers ile Threading.
Web Sockets.

Microsoft Bilişim Zirvesi 2011 Sunum ve Videoları

Geçen seneki gibi bu senede zirveye katılma şansı buldum. Geçen seneye göre çok daha hoş ve etkileyici bir zirveydi. Özellikle benim için anlamı çok büyük oldu. Lise sona kadar hayal ettiğim bir meslek vardı. Astronot olmak; bu benim için kendimi bildim bileli olmak istediğim birşeydi. Şimdi diyeceksiniz bu zirve ile ne alakası var. Gülümseme Bu seneki zirvede bir konuk konuşmacı vardı. Araştırmacı astronot Prof.Dr. Ulrich Walter. Gülümseme Kendisi hayatımda çözüm bulmayı ve bilmeyi istediğim tüm sorulara yanıt verecek bir konuşma gerçekleştirdi. Yaklaşık 1 saat süresi boyunca soluksuz bir şekilde bize en baştan en sona kadar bir astronot nasıl seçilir, nasıl eğitilir ve uzayda olmak nasıl birşeydir. Hepsini anlattı. Şunu söyleyebilirim ki başından sonuna kadar, teknik kısımları da dahil böyle bir tecrübeyi bir astronottan dinlemek çok keyif verici ve çok etkileyiciydi. Hafızama kazınıp çıkmayan bir cümlesi beni çok etkiledi.. “10 günlük bir görev için 5 sene eğitim gördük.” dedi. Bu gerçekten uzun bir süre ve sonundaki başarı hissi çok muhteşem olmuş. Nereden mi biliyorum resimlerini gösterdi Gülümseme Hatta uzaydan çekilmiş dünyanın harkülade resimlerini gösterdi. Geceleri dünyanın uzaydan bu şekilde göründüğünü hiç bilmiyordum. Hiç görmemiştim.. Gerçekten etkileyiciydi. 2012 ‘yi heyecanla bekliyorum.

 

İlgili videolara şu adresten ulaşabilirsiniz..

Get Microsoft Silverlight

DCSIMG

Hakan Çamoğlu: CSS Tasarım (Seminer Videosu)

Hakan Çamoğlu: CSS Tasarım (Seminer Videosu)

ASP.NET – Code-Behind Property Kullanımı ile İlgili Teknik ve İpuçları

ASP.NET web sayfalarının arkaplan kodunda çoğu zaman Property ‘ler kullanırız. Fakat bu yapı, windows forms ile uygulama geliştirenler için anlaşılması biraz zor gelebilir. Çünkü farklı bir çalışma mekanizması söz konusudur. Bu sebeple bu durumda neler yapabileceğimizi ve property’leri nasıl kullanacağımızı anlatan bu video kaydını sizinle paylaşmak istiyorum. Ses biraz uğultulu çıkmış ama anlaşılmayacak kadar değil. 🙂 İlginizi çekeceğini düşündüğüm bazı teknikleride video da paylaştım.

 

http://content.screencast.com/users/MaviSeffaf/folders/Default/media/07c67139-b560-49de-bb5b-3a46bf7511e9/mp4h264player.swf

Videoyu idirmek için tıklayınız..

Windows Live Writer ile Video Yayınlamak

Windows Live Writer uygulaması ile bloğunuza bir video eklemek istediğiniz de, uygulamanın sağ tarafındaki panel den “Ekle” bölümündeki kısımı kullanarak “Video” isimli başlığa tıkladığınızda bir pencere açılmaktadır. Burada 3 farklı şekilde video eklemeniz mümkündür. Bunlara resimlerle değinmek gerekirse;

Windows Live Writer ile Video Yayınlamak

İlk karşınıza çıkan ekrandır. Bu ekranda bir video’nun “internet adresini(url)” yada “embed” kodunu yazarak( ki genelde kopyala – yapıştır yaparız:) )
video’yu bloğunuza ekleyebilirsiniz. 

Örnek; www.movie-list.com web sayfasındaki bir videonun embed
kodunu alalım.

image

image
Bu kodu soldaki pencerede üstteki alana yazdığınız da bir önizleme olacaktır. Sonra “Ekle” butonu ile sayfanıza eklenecektir.

Windows Live Writer ile Video Yayınlamak

Ya da Bilgisayarınızdan bir video’yu YouTube hesabınızı kullanarak YouTube’a Upload edilmesini sağlayarak, bloğunuza ekleyebilirsiniz.. Bilgisayarınızdan video ‘yu seçtikten sonra YouTube hesap bilgileriniz sorulacak ve işleminiz devam edecektir.

 Windows Live Writer ile Video Yayınlamak

Bu ise diğer bir yöntem, ikinci yöntemle aynı şey gibi görünse de aslında bu seferki YouTube’da bulunan bir video ‘yu bloğunuza eklemenizi sağlar. YouTube’a bir video gönderim işlemi gerçekleşmez..

Yukardaki işlemlerden istediğiniz bir tanesi ile video’nuzu ya da internet’te bulunan bir video’yu bloğunuza koyabilirsiniz..

Kolay Gelsin. 🙂

FusionChart ile Grafik Oluşturma

Bu görsel dersimizde Fusion Chart aracını kullanarak görsel grafikler oluşturarak kullanıcıları cezbeden uygulamalar nasıl geliştirebileceğimizi anlatıyor olacağım. Basit bir uygulama ile Fusion Chart’ları nasıl kullanacağımızı ve uygulamalarımızda bu güzel grafikleri nasıl oluşturacağımızı anlatıyorum.

Fusion Chart aracının ücretsiz versiyonunu buradan indirebilirsiniz..

Video – 1

http://content.screencast.com/users/MaviSeffaf/folders/Default/media/9918070a-4b33-4639-9f9f-8fd54ed0075b/bootstrap.swf

Videoyu indir !

Video – 2

http://content.screencast.com/users/MaviSeffaf/folders/Default/media/7fc6615d-429f-45d8-b11b-bf278d2e9426/bootstrap.swf

Videoyu indir !

Uygulamanın form görünümü..

KODLAR

Form1.cs


using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Linq;

using System.Xml.Linq;

using System.Text;

using System.Windows.Forms;

 

namespace LearnFusionChart

{

    public partial class Form1 : Form

    {

        public Form1()

        {

            InitializeComponent();

        }

 

        private void CreateXML(DataGridView dgv)

        {

            XDocument xDoc = XDocument.Load(Application.StartupPath + "\\" + "FusionChartFiles" + "\\" + "Line2D.xml");

            XElement root = xDoc.Root;

 

            root.Elements().Remove();

 

            DataTable dt = dgv.DataSource as DataTable;

 

            root.Attribute("caption").Value = "Aylık Satışlarım";

            root.Attribute("subcaption").Value = "2009 Yılı için";

            root.Attribute("xAxisName").Value = "Aylar";

            root.Attribute("yAxisName").Value = "Satislar";

            root.Attribute("numberPrefix").Value = "TL";

            root.Attribute("yAxisMinValue").Value = dt.Compute("MIN(Satışlar)", null).ToString();

 

            foreach (DataRow dr in dt.Rows)

            {

                XElement element = new XElement("set",

                    new XAttribute("name", dr["Aylar"].ToString().Substring(0, 3)),

                    new XAttribute("value", dr["Satışlar"].ToString()),

                    new XAttribute("hoverText", dr["Aylar"].ToString()));

 

                root.Add(element);

            }

 

            xDoc.Save(Application.StartupPath + "\\" + "FusionChartFiles" + "\\" + "Line2D.xml");

            xDoc = null;

        }

 

 

        private void btnDataTableOlustur_Click(object sender, EventArgs e)

        {

            DataTable dt = new DataTable();

            dt.Columns.AddRange(

                new DataColumn[]

                {

                    new DataColumn("Aylar"),

                    new DataColumn("Satışlar")

                });

 

 

            Random rnd = new Random();

            DataRow dr = null;

 

            for (int i = 1; i <= 12; i++)

            {

                dr = dt.NewRow();

 

                dr["Aylar"] = DateTime.Parse("01." + i.ToString() + ".2009").AddMonths(0).ToString("MMMM");

                dr["Satışlar"] = rnd.Next(0, 100).ToString();

 

                dt.Rows.Add(dr);

            }

 

            this.dataGridView1.DataSource = dt;

        }

        private void btnGrafik_Click(object sender, EventArgs e)

        {

            this.CreateXML(this.dataGridView1);

 

            this.webBrowser1.Navigate(

                Application.StartupPath + "\\" + "FusionChartFiles" + "\\" + "Line2D.html");

        }

    }

}


Line2D.xml


<graph caption='Monthly Sales Summary' subcaption='For the year 2004'

       xAxisName='Month' yAxisMinValue='15000' yAxisName='Sales'

       decimalPrecision='0' formatNumberScale='0' numberPrefix='$'

       showNames='1' showValues='0'  showAlternateHGridColor='1'

       AlternateHGridColor='ff5904' divLineColor='ff5904' divLineAlpha='20'

       alternateHGridAlpha='5' >

   <set name='Jan' value='17400' hoverText='January'/>

   <set name='Feb' value='19800' hoverText='February'/>

   <set name='Mar' value='21800' hoverText='March'/>

   <set name='Apr' value='23800' hoverText='April'/>

   <set name='May' value='29600' hoverText='May'/>

   <set name='Jun' value='27600' hoverText='June'/>

   <set name='Jul' value='31800' hoverText='July'/>

   <set name='Aug' value='39700' hoverText='August'/>

   <set name='Sep' value='37800' hoverText='September'/>

   <set name='Oct' value='21900' hoverText='October'/>

   <set name='Nov' value='32900' hoverText='November' />

   <set name='Dec' value='39800' hoverText='December' />

</graph>


Line2D.html


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>FusionCharts Free Documentation</title>

<link rel="stylesheet" href="../Contents/Style.css" type="text/css" />

<script language="JavaScript" src="../JSClass/FusionCharts.js"></script>

</head>

 

<body>

<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">

  <tr>

    <td valign="top" class="text" align="center"> <div id="chartdiv" align="center">

        FusionCharts. </div>

      <script type="text/javascript">

           var chart = new FusionCharts("../Charts/FCF_Line.swf", "ChartId", "600", "350");

           chart.setDataURL("Data/Line2D.xml");          

           chart.render("chartdiv");

        </script> </td>

  </tr>

  <tr>

    <td valign="top" class="text" align="center"> </td>

  </tr>

  <tr>

    <td valign="top" class="text" align="center"><a href="Data/Line2D.xml" target="_blank"><img src="../Contents/Images/BtnViewXML.gif" alt="View XML for the above chart" width="75" height="25" border="0" /></a></td>

  </tr>

</table>

</body>

</html>


Projeyi buradan indirebilirsiniz..