Yusuf Akdin - Bilgisayar Mühendisi

Kayıtlar

Ocak, 2017 tarihine ait yayınlar gösteriliyor

Front-End Developer, Back-End Developer ve Full Stack Developer

Front - end developer: Kullanıcının etkileşime girdiği önyüzün (client-side), HTML, CSS ve JS teknolojilerini kullanarak geliştiren kişiye front - end developer (önyüz geliştirici) denir. UI (Kullanıcı Arayüzü) tasarımını alır bunu HTML ve CSS‘e döker. - HTML sayfalar oluşturmaya başlanır. - CSS, Sass, Less tüm bunlar bu safhada oluşturulur. - Sonra “Layout” dediğimiz sayfa şablonları oluşturulur. Son olarak Back End’in yaptığı sisteme entegre etmek kalır. Sistem hangi dille yazılmış ise Front-End yazılımcının bu dili biliyor olması gerekiyor. Örneğin: PHP Entegre edilirken son olarak tasarımdaki rütuşlar yapılır, javascript kodları ile bazı hareketler katılır. Back-end developer: kullanıcının görmediği arka kısmı (server-side), geliştiren kişidir. - Öncelikle yapılacak web sitesinin, projenin veritabanı şemasını hazırlar. - Daha sonra kullanılacak kütüphaneleri seçer ve sistemin arkaplanını hazırlamaya başlar. - ...

Devamı

css ile arkaplan özellikleri

background-image: Örnekte gördüğünüz gibi arkaplan resmi olarak “ resimler ” klasöründeki “ arkaplan.jpg ” resmini seçtiğimizi bu özellikle belirtiyoruz. background-repeat: Bu özellik ile arkaplan resmimizin tekrar edip etmeyeceğini, eğer edecekse x’mi yoksa y ekseninde mi edeceğini belirtiriz. Alabileceği değerler: repeat – Hem yan olarak hem de alta doğru tekrar et repeat-x – yana doğru tekrar et repeat-y – aşağı doğru tekrar et no-repeat – tekrar etme background-attachment: Arkaplan sayfa ile birlikte kaysın mı yoksa sabit mi kalsın ayarını bu seçenek ile yaparız. Bunun değerleri: scroll – sayfa ile kayar fixed – sabittir background-color: Arkaplan resminin altında kalan alanın rengini, yani arkaplanın rengini belirlediğimiz özelliktir. background-position: Arkaplan deseninin başlayacağı yeri belirtir. Alabileceği değerler: top left – üst sol top center – üst orta top right – üst sağ center left – orta sol center center – ekranın ortası (hem üstten he...

Devamı

css ile basit üst menü yapımı

Html Kodumuz: <head> tagının içerisine: <link href="Style.css" rel="stylesheet" /> <body> tagının içerisine: <div id="ustmenu"> <ul> <li>link</li> <li>link</li> <li>link</li> <li>link</li> </ul> </div> Style.css stil dosyamınızın içerisine: * { /* * işareti ile tüm elemanları işaretleyip içerisinde yazan kodu tüm elemanlara uygular */ padding: 0px; margin: 0px; border: 0px; } ul, li { list-style:none; /*listedeki notları silme*/} #ustmenu { margin:10px; /*dış boşluk*/ border: 1px solid #ccc; /*dış çubuk*/ float:left; /*sola dayama kodu*/ border-right: 0px; /*dış çubuk sağ 0 olarak veriyoruz*/ } #ustmenu li { float:left; /*menüyü sola yaslama eğer yapmazsak alt alta yazar*/ padding: 10px; /*linkler arası boşluk*/ border: 1px solid #ccc; /*menümüzün borderını ayarlıyoruz*/ cursor: pointer; /*linkler...

Devamı

Bazı basit ama işe yarar css kodları

1. Sabit arkaplan kodu: background: url(bg.jpg) no-repeat 100%; background-attachment: fixed; 2. Css dosyasını siteye gömme: <link href="StyleSheet1.css" rel="stylesheet" type="text/css" /> 3. Sitenizin yazı tipini belirleme kodu: font-family: 'lucida grande',tahoma,verdana,arial,sans-serif; 4. Linkteki altçizgiyi kaldırma kodu: text-decoration: none; 5. Üzerine gelince renk değiştirme kodu: .auto-style1:hover { color:aqua; } 6. Yazı altına çizgi ekleme: border-bottom:solid 3px red; 7. Link, Paragraflara özellik renk tanımlaması yapılabilir: a { color: white; text-decoration: none; } a:hover { color:aqua; text-decoration: line-through; } p:hover { color:aqua; } 8. Arkaplan sabit resim yapma kodu: background: url(images/bg.jpg) no-repeat 100%; background-attachment: fixed; 9. Css ile yuvarlak:...

Devamı

Tasarımcılar işine yarayacak ücretsiz kaynaklar

Tasarımcılara başarı sağlayan ve fikirlerini, çalışma altyapılarında kullandığı kaynakları merak ettiniz mi hiç? İşte sizlere PSD dosyaları, UI elementleri, mock-ups vb. kaynak dosyaların paylaşıldığı siteler. Bu sayfayı yer imlerine ekleyerek bu kaynakları elinizin altında bulundurmayı da düşünebilirsiniz. wink 1.Fribbble ( fribbble.com ) Web sayfalarınız için ikon açlışmaları, iPhone mockup veya PSD dosyalarını bulabileceğiniz bir kaynak. 2.Behance Proje Tüyoları ( bağlantı ) Tasarımcıların projelerini paylaştıkları bir alan olarak bilinen Behance sitesine bir proje eklemek biraz zahmetli bir iştir. Bu nedenle hazırlanmış bir kaynak bu konuda sizlere yardımcı olacaktır. 3.psddd.co ( psddd.co ) Bir bakşa PSD kaynağı, içeriğinde ücretsiz PSD çalışmaları ve UI elementleri mevcuttur. 4.Colourlovers ( colourlovers.com/palettes ) Çalışmalarınız için mükemmel renk kombinasyonu oluşturma konusunda önemli tüyo ve yardım alabileceğiniz değerli bir sit...

Devamı

Anime.css nedir? ne işe yarar?

Animate.css içerisinde 75 tane css ile hazırlanmış animasyon bulunduruyor. İşimizi hızlandırmak için kendimiz sıfırdan yazmak yerine bu css dosyasını kulllabiliriz.İlk olarak "animate.css" dosyasını indirelim ve sayfaya dahil edelim. Animate css dosyasını indirmek için => https://daneden.github.io/animate.css/ sayfasından download animate.css diyerek dosyamızı indiriyoruz. Ardından sayfamıza dahil ediyoruz. Head etiketinden önce ekliyoruz. < link rel = " stylesheet " type = " text/css " href = " animate.css " > (Eğer animate.css başka dizine attıysanız href="animate.css" yazan kısmı kendinize göre değiştirin) Ardından animasyon uygulayacağımız nesneyi oluşturalım. < div class = " kutu " > < span > Webderslerim.com </ span > </ div > Birde css ile kutu divimize biraz biçim verelim. < style > .kutu { background : #0799D1 ; color : #fff ; font-weight ...

Devamı