Manisa Bilişim Platformu Koordinatörü ve Celal Bayar Üniversitesi Öğretim Görevlisi Mustafa Özhan Kalaç, “Manisa Bilişim 2012″ nin planlanan etkinlikleri hakkında bilgi verdi.

Manisa Bilişim Platformu olarak 2012 yılında gerçekleştirilecekleri ilk etkinliğin, artık geleneksel hale gelen ve Türkiye çapında beğeni kazananweb tasarım yarışmamızolacağını kaydeden Kalaç “Bu sene beşincisini düzenleyeceğimiz webtasarım yarışmamız’Hayalindeki Mesleği Anlat’, Celal Bayar Üniversitesi, Manisa Valiliği, Manisa Belediyesi ve Manisa İl MilliEğitim Müdürlüğü işbirliği ile gerçekleştirilecek” dedi.

Amaçlarının öğrencilerin hayalindeki mesleği anlatmalarına vesile olmak, bilişim ve internet teknolojileri alanında onları teşvik etmek olduğunu ifade eden Kalaç, yarışmanın ilk ve orta öğretim ile CBÜ öğrencileri arasında üç kategoride düzenleneceğini, yarışmacıların danışman öğretmen ve öğretim elemanı desteği ile yarışmaya katılabileceklerini kaydetti. Yarışma takvimi vedetayları hakkında bilgi veren Kalaç, “Yarışmaya son başvuru 17 Şubat 2012,Proje son teslim tarihi ise 28 Mart 2012′dir. Ödül töreni, Nisan 2012′deİnternet Haftası Etkinlikleri kapsamında gerçekleştirilecek. Öğrencilerimizyarışmayla ilgili detaylı bilgiye, 12 Ocak 2012 tarihinden itibaren www.manisabilisim.org adresinden ulaşılabilecek” dedi.

Manisa Bilişim olarak 2012 yılında kurumlar arası işbirliğiyle “İnternet HaftasıEtkinlikleri”, “Bilişim Haftası Etkinlikleri”, “Teknik Eğitim Seminerleri” ve “Engelsiz Bilişim Çalışmaları” gibi birçok etkinliği gerçekleştireceklerini belirten Kalaç, “Başta Rektörümüz Prof. Dr. Mehmet Pakdemirli, Rektör Yardımcımız Prof. Dr. Ali Çelik ve Bilişim Teknolojilerinden sorumlu Rektör Danışmanı Yrd. Doç. Dr. Ceyhun Araz olmak üzere tüm üniversite olarak, bilişime çok büyük önem veriyoruz. Manisa Bilişim çalışmaları da gerek kurumlar arası işbirliğiningüzel bir örneği olması, gerekse Manisa’nın bilişimdeki geleceğine yön vermesi bakımından oldukça büyük öneme sahip. Celal Bayar Üniversitesiolarak çok kısa süre sonra Bilgisayar Mühendisliği Bölümümüz öğrenci almaya başlayacak. Ayrıca 2011 yılı içerisinde açılmış olan Sürekli Eğitim Merkezi’miz de gerek Manisa Bilişim Platformu çalışmaları açısından, gerekse Manisa’dakivatandaşlarımızın kendilerini geliştirebilmeleri bakımından önemli katkılar sağlayacak. Yarışmada dereceye giren öğrencilerimize bilişim teknolojileri alanında birbirinden güzel armağanlar verilecek.” diye konuştu.

Bilişim ve İnternet sektöründe hizmet veren Mandalina Web Tasarım stajyer alacaktır…

Grafik tasarım ile Web tasarım konusunda hizmet veren firmamızda müşterilerle ilişkileri sağlayacak, diksiyonu düzgün, bilgisayar ve internet kullanımına hakim kişiler değerlendirilecektir.

Alınan stajyer arkadaşlar aynı zamanda Mandalina Casting adındaki oyunculuk ajansımızın da kısmen işleri ile ilgileneceklerdir. Oyuncu adaylarının, stüdyomuzda fotoğraf çekimini, fotoğrafların photoshopta düzenlenip sistemimize ve web sitemize aktarılmasını, başvuruları değerlendirmesini yapacak, iletişimi kuvvetli, diksiyonu düzgün stajyer adayları info@mandalinatasarim.com adresine fotoğraflı CV’lerini gönderebilir, ya da info@mandalinatasarim.com adresini MSN’e ekleyerek bizimle irtibata geçebilirler…

Stajyer adaylarında aradığımız özellikler;

Adaylarda Aranan Özellikler:
•Bilgisayar ve İnternet kullanımına hakim,
•Adobe Photoshop, CorelDRAW, Adobe Flash programlarından herhangi birine hakim,
•Müşteriler ile irtibat kurabilecek girişken, konuşkan, öz güveni yüksek, diksiyonu düzgün,
•HTML, PHP, Flash, ASP, MySQL programlama dillerine az çok hakim,
•17-25 yaş arası erkek veya bayan,
•Yeniliğe/değişikliğe açık olma
•Ekip çalışmasına uyum sağlayabilme
•Kişisel motivasyonu yüksek
•Bilgi paylaşımına açık olma..
•Kariyerini Grafiker ve webmaster olmak üzerine kurmuş kişiler…
Başvuru Şekli:
•Kısa Dönem veya Uzun Dönem Staj yapmak isteyen adaylar başvurabilir.
•Adaylar Resimli CV’ lerini info@mandalinatasarim.com adresine yollayabilir ya da aynı adresi MSN’e ekleyerek bizler ile irtibata geçebilirler…

•Maaş ve çalışma süreleri görüşme esnasında konuşulacaktır.

TEL: 0212 873 4 111 – 0212 873 5 777
GSM: 0544 550 5 550
Cumhuriyet Mah. Atatürk Bulvarı, Bey City Residense B Blok K:4 D:32 Beylikdüzü / İstanbul
info@mandalinatasarim.com

Grafik Tasarım ve Esinlenme

Çoğu tasarımcı ya da sanatçı, kendini etkileyen bir iş gördüğünde, argo tabiriyle gaza gelip hemen birşeyler yapma isteği duyar. Bu içsel bir kıskanma ya da etkilenmenin sonucudur.

Önümüze gelen birifte, bizden istenenin ne olduğunu iyi anlamak tasarıma başlamanın ilk koşuludur. Yeterince açık olmayan ya da anlaşılmayan bir iş brifinde sonuç rastlantılara bağlıdır ve başarısızlığı kaçınılmazdır. Bu nedenle işi alırken isteneni iyi algılamak çok önemlidir.

Müşteri hemen her zaman en kısa zamanda en iyi işi ister.
Sürekli ve rutin biçimde tasarımla uğraşan tasarımcı için, her gün yeni yeni super tasarımlar yapmalıdır, en sivri konseptlere imza atmalıdır beklentisi, grafik ve reklam tasarımcılığını ağır beyin işçiliği haline çevirir.

Dehası olanların dışında böyle bir şey elbette mümkün değil.
İşe başlarken, hemen macintoshun başına oturup, evet benden ne isteniyor, hmm, (örneğin) bir davetiye, hemen yolalacağım, 2 saat içinde de işi bitireceğim diyemezsiniz. Bazan ilk saniyelerde kafanızda konsepti oluşturabilirsiniz ama bu sürekli başınıza gelmez. Bazan günlerce düşünüp yol alamayabilirsiniz.

İşi alınca öncelikle, panik yapmayın. Ne dendiğine ve sizin ne vereceğinize bir bakın. Özellikle konuyla ilgili, esaslı grafik kitaplarına ve dergilerine gözatın. Sevdiğiniz işleri iyi inceleyin. Kullanılan fonttan, renk seçimine, işin ana fikrinden, lekesel dengelerine kadar… İşte burada esinlenmeler mekaniği devreye girecektir. Mesleki yaşantımda, işi birebir taklit eden tasarımcılarla da, esinlendiği bir işten mucizeler yaratanlarla da çok karşılaştım. Bir şirket logosu için fontundan esinlenemezsiniz. Ama kullanılan renk kombinasyonu sizin kafanızda yeni bir pencere açabilir.

Bütün işler kendine has olmalıdır evet. Şunu da unutmayalım her iş eşsiz bir özgünlükte olamaz. Eğer tasarım fikrine böyle girerseniz eliniz ve beyniniz kasılabilir.

Tasarım için kendinize özgüveniniz tam olsun. Ben bu işi elimden gelen en iyi biçimiyle çözeceğim fikrini kafanızdan çıkarmayın. Ayrıca şunu da unutmayın, ortaya çıkan işin niteliklerini müşteri temsilcinize veya belki de müşteriye birebir siz aktaracaksınız. Nerde neyi yaptığınızı iyi anlatın. Tasarım bazan derdini anlatmak ister. Daha once de örneğini vermiştim, Fortis Bank’ın amblemi tam anlamıyla bir pazarlama başarısıdır. Ama estetik değerleri, endişeler ve eksikliklerle doludur. Dolayisiyle Kabul gören bir iş de olsa, iyi tasarlanmış bir amblemin etkisinden daha az bir etkiye sahiptir.

Tasarımınızın ilk aşamalarında veya ilerleyen zamanlarda, konuyla ilgili estetik hakimiyetine inandığınız bir diğer kişiden fikir edinebilirsiniz. Ya da ilerlemeye başladığınızda, müşteri temsilcisine; bak böyle yol alıyorum da diyebilirsiniz. Ki saatler sonra, “ayy bu çocuk görselinin burda ne işi var” gibi tepkileri önlemiş olmak için.

Eğer bitmiş bir işten esinlenip gaza geldiyseniz, dur şurdaki dianın font ile kullanımını burdan alayım, renkleri şurdan diye kolaj yapmanızı ise önermem. Hem bu mesleki formasyona uygun olmaz hem de yerin kulağı vardır unutmayın.

Diğer yapılan tasarımları görmek için interneti de yoğun biçimde kullanmalısınız.
Tasarımcılığınızın niteliğini oluşturmak için şöyle sorun kendinize; ben gerçekten tasarımcı mı olacağım yoksa salla gitsin mühim olan maaş bordosudur mu… Eğer ikinci şıkkı seçtiyseniz portfolyonuza koyacağınız işlerin, ay başlarında size uzatılacak olan zarfın kalınlığıyla ilgili olduğunu unutmayın.

Dünyanın en iyi grafik tassarımcılarından biri olan David Carson için şu hikaye anlatılır. Surf ile yoğun alakalı olan Carson eskiden bir dönemler grafik yapmıyormuş ve surf yelkeni için başkasına grafikler tasarlatmış. Fakat çıkan sonuçları görünce bu işi ben bile daha iyi yaparım deyip kendi yelkeni için birşeyler yapmış. Sonuç o kadar iyiymiş ki adam içindeki cevheri böyle farketmiş. Benzer bir hikayeye geçtiğimiz yıllarda bizzat şahit olmuştum. Bir dergi grubundaki grafikerle tanışmıştım. İşin patronu grafikerle beni tanıştırırken” asıl mesleği ciğerciliktir ama biz grafiklerini daha çok beğeniyoruz” demişti. İşlere baktım gayet şık mizanpajlardı.

Tüm tasarım dalları özel yetenekler gerektirir. Ama biryerde çalışıyorsanız veya bu işin eğitimini aldıysanız zaten bir yerdesiniz demektir. Eğer piyanist olmak istedeydiniz elinizdekilere bakmalıydınız. Grafik tasarımcı olmak için ezelden yetenekli olmanız gerekmez.

 

web tasarım istanbul

İstanbul Beylikdüzü’nde web tasarım hizmeti veren firmamız, yaptırmış olduğunuz web tasarımı çalışmalarını minimum 3, maksimum 60 gün arasında teslim etmektedir. İşlerin teslim süresi, istenilen web tasarım özelliklerine göre değişkenlik göstermektedir.

Türkiye’nin tüm illerine web tasarım hizmeti vermekte olan Mandalina Web Tasarım firmamız, 7/24 online olan ekibimiz ile, GSM, E-Mail ve MSN yoluyla 7/24 kesintisiz hizmet sunmaktadır. En ucuz fiyata, en kaliteli hizmeti sunmak için yola çıkmış bulunmaktayız.

Profesyonel grafikerlerimiz ve web tasarımcılarımız tarafından tasarlanacak olan web siteleriniz için, %50 iş öncesi, %50 iş sonrası şeklinde ödeme kolaylığı sağlanmaktadır.

Web tasarım fiyatları, istenen tasarıma göre ve web yazılım diline göre değişiklik göstermektedir. Web sitenizde hangi özellikleri istediğinizle ilgili detaylı bilgileri ve sizinle aynı içerikteki beğendiğiniz sitelerden 1-2 örnek site adresini info@mandalinatasarim.com adresine mail atarsanız, ekibimiz en geç 1 saat içinde size mail yoluyla veya telefonla geri dönüş yapacaktır.

Ayrıca Mandalina Web Tasarım olarak, kurumsal firmalar için muhteşem bir kampanya başlatmış bulunmaktayız.
Yönetim Panelli + 1 ay ücretsiz destek + 1 yıl ücretsiz hosting + 1 yıl ücretsiz domain kaydı + Kurumsal web tasarım : SADECE 499 TL!

Müşterilerimize verdiğimiz diğer tasarım hizmetlerini, sitemizin sağ ve sol tarafındaki menülere tıklayarak inceleyebilirsiniz.

7/24 E-Mail ve MSN adresimiz olan info@mandalinatasarim.com adresinden ekibimizle irtibat kurabilir veya yine 7/24 destek verdiğimiz GSM numaramız 0544 550 5 550 ‘yi arayabilirsiniz.

Birlikte çalışmak dileğiyle,
Mandalina Tasarım Hizmetleri

Bu dersimizde CSS ile dikiş izli tablo yapımını öğrenelim.

İlk önce HTML kodlarımızı yazıyoruz.

<html>
<head><title>Dikiş İzli Tablo</title>
/*Burda style.css dosyamızla bağlantı kuruyoruz.*/
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
/*Burda tablomuzu çiziyoruz.*/
<table>
<tr>
<td></td>
</tr>
</table>
</body>
</html>

Bu sayfamızı index.html olarak kaydediyoruz ve style.css sayfamıza aşağıdaki kodları yazıyoruz.

.dikisli_tablo{
width:1000px;
height:100px;
margin:0 auto 0 auto;
background:#666666;
border:1px dashed #000000; /*Burda kullandığımız dashed kodu tablomuzun çizgilerini dikiş izli yapmamızı sağlıyor.*/
}

Sayfalarımızı kaydettikten sonra çalıştırıyoruz ve sonucu görüyoruz.

 

Web Tasarımı nedir? Türkiye’de web tasarımının durumu nasıl? Web Tasarımı için nelere dikkat edilmeli? Hangi programları kullanmak gerekiyor?

Tasarımın Tarihi

Tasarımın tarihi, MÖ 14.000′lerde yapılmış mağara resimlerine ve M.S. 4. yy’da yazının başlamasına dayandırılabilir. O dönemlerde entelektüel düşünce din etrafında olduğundan, ilk basılan kitaplar dinî kitaplardır. Basılı yayınlar için harf ve metin dizimi, erken dönem tasarım pratikleridir. Asıl çıkış noktası ise; sanayileşme ve modern yaşama geçiş ile, özellikle de fotoğrafın keşfi sonrasında başlamıştır. Çünkü resim sanatı farklı bir yöne ilerlemeye başlamış grafik, afiş, ürün katalogları vb. öne çıkmaya başlamıştır.

1891-1896 arasında William Morris tasarladığı kitaplarla zamanına göre çok başarılı grafik tasarımı işler üretmiştir. Bu dönemler tasarımın sanattan ayrılmaya başladığı dönemlerdir. 1919′da Almanya’nın kurulan
Bauhaus Okulu sanat ve tasarım alanında birçok yeniliğin öncüsü oldu.

Web Tasarımın Tarihi

Tim Berners-Lee 1989′da HTML işaretleme dilini geliştirerek Dünya Çapında Ağ (www) olarak da tanımlanan bilgi paylaşım sistemini kurmuş olan bilgisayar profesörüdür. Web`in babası kabul edilir. Aynı zamanda ilk ağ tarayıcısı yazılımını, 1990 yılında geliştirmiştir. 1994 yılında ağ ile ilgili standartları dünya çapında belirleyecek açık bir kurum olan W3C`yi kurmuştur ve halen de başkanlığını yapmaktadır.

Web Tasarım Nedir?

Web tasarımı, web sitesinin görsel ve kodsal kısımlarının oluşturulması işidir.

Web sitesi günümüzün medyası olan internet yayıncılığı üzerinde yer alan size ait firmanız için veya şahsınız için özel olarak hazırlanmış bir iletişim panosudur. Sizi veya firmanızı web üzerinde temsilen yayınlanır.

Bildiğiniz gibi internet (web), radyo ve relevizyon benzeri bir medya sayılmaktadır. Etkinlik açısındansa diğerlerinden daha çok ön plana çıkmaktadır.

Bir web sitesi sayesinde, firmanızın veya sizin tanıtımınız, bilgilerinizin sunulmasını çok daha büyük kitlelere (tüm dünyaya) en ekonomik biçim yapılır.

Web Tasarımı ve Türkiye

Türkiye’de Web Tasarımı ve Web Programlama sektörü gün geçtikçe daha da büyüyor ve bu sektöre ilgi gitgide artıyor. Buna rağmen web tasarımı ve Türkiye kelimeleri bir araya geldiğinde ortaya bir karmaşa çıkıyor.

Maalesef Türkiye henüz web tasarımı ve web programlama konularında bir birliğe, bir kurumsallaşmaya gitmiş değil.

Türkiye’de web tasarımı yapan firma ve kişilerin profiline bakıldığında grafik tasarımcılarından çok bu işe hobi olarak başlamış, ama kısa sürede kendini çok iyi bir webmaster zanneden amatörlerden oluşmaktadır.

Tam siteye yeni eklentiler ekleneceği ya da güncelleme yapılacağı sırada askere giden webmasterlar, alan adını kendi üzerine alıp daha
sonradan firmaya zorluk çıkaran uyanıklar, hazır script ve ya sitelerden web sitesi oluşturup programda veya tasarımda bir değişiklik istenince kitlenen sözde web programcıları yüzünden piyasada maalesef web tasarım firmalarına karşı bir güvensizlik oluşmaktadır.

Profesyonel bir web sitesi hazırlamak için hangi yöntemler izlenmeli?

Web tasarımıyla uğraşıyorsanız mutlaka tasarımınızı mükemmelleştirmek için çalışırsınız; haklısınız da, bir sitenin tasarımı ne kadar güzel olursa sitenin başarısı da o derecede artar.

Web Tasarımı derken ilk olarak aklımıza bir web sitesinin görsel olarak gözümüze görünen kısmı gelir. Halbuki iş sadece bundan ibaret

değildir.

Sitenin görselliği kadar işlevselliği ve kodlaması da önemlidir. Yaptığımız sitenin tasarımının kullanıcıyı tatmin etmesi ve kodlaması ile olabildiğince uyumlu olmalıdır.

Web sitesi tasarımı yapmaya başlarken ilk önce algoritma oluşturmak

sizin yararınıza olacaktır.

Tasarımlarınızda estetik ve görselliğe dikkat edin.

Mesela bir oyun sitesi tasarımı yapıyorsanız tasarımın olabildiğince renkli ve görselliğinin çok iyi olması gerekir.

Web tasarımı özgün ve size ait olmalıdır. İnternet milyonlarca web

sitesinin olduğu bir platform.

Bugün internetin önde gelen sitelerinin tamamını incelediğinizde özgünlükten asla ödün vermediklerinin görürsünüz.

Arama motorlarında üst sıralarda yer almak içinde özgün metinler yayınlamalısınız.

Müşteriniz web sitenizde dolaşırken, çalışmayan sayfalar, hatalı metinler, kötü tasarım ve anlaşılmayan bir kurguyla karşılaşırsa sizinle ilgili ilk izlenimi pek de iyi olmayacaktır.

Web sitesi yapılırken hiçbir şey bilmeyen bir insan baz alınarak yapılmalıdır. Siteye giren herhangi biri kolayca aradığı bilgilere ulaşabilmelidir.

Yapılan web tasarımının hızlı yüklenmesi aynı zamanda onun iyi bir şekilde kodlandığını gösterir.

Hız konusunda en önemli unsurlardan biri de web sunucunun güçlü bir server’a sahip olmasıdır.

Esas olan, kullanıcıya ürün ve hizmeti en kısa yolla ulaştırmaktır. Bu nedenle sitenin hızını düşürecek abartılı animasyonlar, bekleme süreçleri, video ve ses objeleri, kullanımı zor menüler tercih edilmemelidir.

Arama motorlarının mantığını bilmek ve bu mantığa göre web sayfası tasarlamak günümüzde en önemli kriterlerden biridir. Profesyonel bir web sitesinde yer alan her sayfa arama motorları tarafından indekslenebilir yapıda oluşturulmalıdır.

Web sitenizden en iyi etkileşimi sağlayarak hedeflediğiniz kitleye ulaşabilirsiniz ve bunun için çok ekonomik bir yol izlemiş olursunuz.

Domain (Alan Adı) Nedir?

Domain (alan adı) web sitenizin internet üzerindeki adı ve adresidir. Mesela en çok kullandığımız alan adı şüphesiz ki GOOGLE’dur ve bu web
sitesinin domaini (alan adı) google.com’dur.

Domainler, IP adresi diye tabir edilen, bilgisayarların birbirini görmesini sağlayan numerik sisteminin daha kolaylaştırılmış halidir.

Hosting (Barındırma) Nedir?

Hosting, bir ya da daha fazla web sayfasının ilgili tüm materyallerinin barındırılması, yayınlanması ve korunmasını sağlama işine verilen global bir isimdir.

Müstakil bir ev yaptırmak istiyorsunuz, bunu gerçekleştirebilmek için
sahip olmanız gereken şeyler vardır;

Arsa

İnşaat ruhsatı

İnşaat malzemeleri (demir, tuğla, boya vs.)

Bu örnekten yola çıkarsak, İnşaat ruhsatınız: Alan adı (domain), İnşaatı gerçekleştirebilmek için ihtiyacınız olan malzeme: Web sayfanız, Arsanız: Hosting’dir.

HTML

HTML (Hyper Text Markup Language) kişisel, kurumsal veya kitlelere hitap eden web siteleri oluşturmamızı sağlayan betik bir dildir. HTML
dosyalarının aktarımı için HTTP kullanılmaktadır.

HTML dosyaları sunucu bilgisayarın sabit diskinde html ya da htm uzantısı ile saklanır. HTML ile tasarladığımız web siteleri ilk bakıldığında pek bir anlam ifade etmeyebilir.

Tasarladığımız sayfalar İnternet Explorer, Firefox, Opera gibi web browserlar ile yorumlanır ve bizim görsel olarak sayfayı anlamamızı sağlarlar.

HTML İle Neler Yapılabilir?

Tablolar oluşturulabilir,

Listeler yapılabilir ,

Yazılar üzerinde değişik formatlaruygulanabilir ,

Resimler sayfaya istenildiği gibi yerleştirilebilir .

HTML İle Neler Yapılamaz?

Veriler işlenemez ,

Veritabanı ile ilgili işlemler gerçekleştirilemez,

Dosyadan veri okunamaz,

Tarihe bağlı işlemler gerçekleştirilemez,

Mail gönderilemez .

CSS

HTML bize metin biçimlendirme alanında çok geniş olanaklar sunar. CSS, (Stil şablonları) ise bunu bir adım daha öteye götürür, bize sayfalarımız için global şablonlar hazırlama imkanı verdiği gibi, tek bir harfin stilini; yani renk, font, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği
kullanımındaki bu esnekliğidir.

CSS kodları HTML kodlarının içine yazılırlar. Türüne göre body veya head bölümlerinde yer alabilirler. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinde çağırılabilirler.

JAVASCRIPT

Javascript Netscape firması tarafından geliştirilmiş olan bir script dilidir.

Web sayfalarında gördüğünüz açılır menüler, bazı animasyonlar, hesaplamalar vb. pek çok şey Javascript ile yapılır. Abartmadan kullanıldığında Javascript şu anda web teknikleri içinde yer alan en önemli ve faydalı bir şeydir desek abartmış olmayız.

JavaScript’in çalışması için tarayıcının onu desteklemesi ve tarayıcının buna izin vermesi gerekiyor. Eğer tarayıcınızda Javascript kullanımını kapadı iseniz bütün bu etkileşimli web tekniklerinden dışarıda kalıyorsunuz.

İçinizi rahatlatmak için bir not: JavaScript’in yapamadığı en önemli şey nedir biliyor musunuz? Bilgisayarınıza müdahale edemez. Yani dosya
silemez, yazamaz vb. Bu da güvenlik için düşünülmüş bir şeydir. Daha iyisi başarısız olduğunda Javascript sistemi çökertmez.

ASP

ASP, Microsoft tarafından 1996 yılında gelistirilmiştir. ASP, Active Server Pages (Aktif sunucu sayfaları) ifadelerinin kısaltılmış biçimidir. ASP tek başına bir programlama dili degildir. Özellikle web sunucusu ile çalışan bir tekniktir. ASP sayesinde veri tabanı uygulamaları ve elektronik ticaret siteleri kolayca yaratılabilir. İnternet Explorer, Mozilla Firefox, Google Chrome, Opera gibi browserlarda aynen çalışacaktır. ASP içerisinde Vbscript ve Javascript denilen scripting dilleri kullanılabilir. Bu da ASP’yi daha cazip hale getiren özelliklerden birisidir. Eğer daha önce javacript veya Vbscript dilini biliyorsaniz, ASP ögrenmek sizin için tahmininizden de kolay olacaktır.

ASP.Net

Microsoft tarafından pazarlanan bir web uygulaması teknolojisidir. Özdevinimli web sayfaları, XML tabanlı web hizmetleri elde edilmesini
sağlar. Her ne kadar isim benzerliği olsa da ASP.NET, ASP’ye oranla çok
ciddi bir değişim geçirmiştir. ASP.NET kodu ortak dil çalışma zamanı alt yapısına dayalı çalışır.

ASP.NET belgeleri ASPX yapısını kullanırlar. ASPX belgesi, özdevinimsiz
(statik) HTML veya XHTML tabanlı, web sayfasında belirecek olan içeriğin yanı sıra, sunucu tarafından çalıştırılacak olan özdevinimli kodu da iki ayraç arasında tutar Bu her ne kadar sıkça kullanılan bir durum olsa da, genelde uzmanlarca tavsiye edilmez. Onun yerine, içerik ve kodun ayrılması önerilir. Kullanılan dile göre, sunucu tarafından çalıştırılacak kodu içeren belge Sayfam.aspx.cs (C#) veya Sayfam.aspx.vb (VB.NET) olarak adlandırılabilir.

ASP.NET’in kullandığı diğer belge türleri arasında ascx, asmx, ashx,
master, sitemap, skin ve config sayılabilirler.

PHP

PHP programlama dilinin, 1994 yılında Rasmus Lerdorf tarafından 1995 yılı başlarında ise PHPPersonel Home Page Tools adı altında iki sürümü piyasaya çıkarıldı. İlk sürümde sadece sayaç, misafir defteri ve buna benzer basit işlemler gerçekleşebiliyordu.

1995 yılının ortalarına doğru, PHP’nin ana mekanizması yeniden yazıldı. İçerisine Rasmus Lerdof’un yazmış olduğu başka bir paket olan FI, MySQL desteği ve HTML form yorumlayıcı yerleştirildi. Sonunda yeni
çıkan pakete PHP/FI sürüm 2 adı verildi.

1997 yılının ortalarında ise PHP’nin ana mekanizması Andi Gutmans tarafından yeniden kodlandı ve yeni pakete PHP sürüm 3 (PHP3) adı verildi. Günümüzde PHP dili milyonlarca web sayfası tarafından kullanılmaktadır.

PHP, HTML içerisine sıkıştırılmış, sunucu tarafında çalışan, C tipinde
bir script yazılım dilidir. PHP’nin en güçlü ve en önemli özelliği Oracle, Adabas D, Sybase, FilePro, mSQL, Velocis, MySQL, Informix, Solid, dBase, ODBC, Unix dbm ve PostgreSQL veri tabanlarına hızlı ve güvenli erişebilmesidir.

Expression Web (Frontpage)

Herkesin çok iyi bildiği Microsoft FrontPage, artık yerini Expression Web programına bırakmıştır. Expression Web, Web sayfası ve Web sitesi oluşturmak için geliştirilmiş bir programdır.

Microsoft’un kendisine aittir. Expression Web’i önemli kılan birkaç özellik ise;

Basit bir doküman dosyası hazırlar gibi web sitenizi hazırlayabilir, sitenize ait sayfaları şema halinde oluşturup şemaya göre sitenizi düzgün temellere oturtabilirsiniz.

Sitenizi oluştururken yerleştireceğiniz web alanına ait dizini tanımlamada bir yığın FTP işlemi ile uğraşmadan kendi dizin yapısıyla sitenizi yayımlayabilirsiniz.

Frontpage’den sonra birçok değişikliklere sahne olan Expression Web ile neler yapılabileceğini Sanalkurs.net’te bu programla ilgili bölümden öğrenebilirsiniz.

Dreamweaver

Macromedia şirketi tarafından geliştirilen, Adobe’nin Macromedia’yı
satın almasından sonra Adobe Dreamweaver adını alan yazılım, bir ağ sayfası geliştirme aracıdır.

Server Behaviors Dreamweaver ile sunucu taraflı projeler geliştirme imkânı sağlayan kullanıcı dostu bir ara yüzü de bünyesinde barındırmaktadır.

Dreamweaver’da;

Kayıt giriş

Güncelleme ve silme gibi veritabanı işlemlerinden,

Üyelik sistemi ve kullanıcı yönetimi gibi birçok işlemi yapabilmek

mümkün.

Üstelik herhangi bir programlama bilgisine de ihtiyacınız olmadan bu tür projeler geliştirebilmeniz de mümkündür.

Dreamwaver’da kullanılabilecek web programlama dilleri şunlardır: HTML, PHP, ASP (VB script ve Javascript, ASP.NET, Javascript, CSS, XLS,

XML, Action Script, Java vs.

Photoshop

Photoshop grafiklerinizi ve fotoğraflarınızı şekillendirebileceğiniz ve
düzenleyebileceğiniz bir resim editörüdür.

Photoshop ile:

Web sitesi oluşturabiliriz,

Web sitemize link verebiliriz,

Fotoğraflarımızı istediğimiz şekilde düzenleyebiliriz,

Küçük çaplı gif animasyon uygulamaları yapabiliriz.

Niçin Photoshop Kullanmalıyız?

İnternet dünyasında milyonlarca tanıtım, site, duyuru vs. gibi bir çok temeli tasarıma dayanan planlar veya projeler hazırlanmaktadır. Bunların amacı, insanların dikkatini çekmektir. Dikkat çekmek ise güzel
bir tasarım ve insanları gözlerini kamaştıracak türden şekiller olmalıdır.

Bunlar için de günümüzde grafik tasarımlı programlar kullanılmaktadır.
Photoshop, kullanımının daha kolay ve özelliklerinin daha fazla olmasıyla en çok tercih edilen grafik düzenleme programıdır diyebiliriz.

Flash:

Flash; ilk olarak Macromedia firmasının çıkarmış olduğu, hareketli animasyonlar yapabildiğiniz, tasarımcıların bir numaralı gözdesi olan programdır. Sonradan yine Adobe tarafından satın alınarak geliştirilmiştir.

ActionScript desteğinin güçlendirilmesi ile de son derece ciddi bir kimlik kazanmıştır.

Flash ile:

Tamamen animasyonlu bir flash web sitesi yapabiliriz,

Web sitelerimiz için hareketli animasyonlar,

Logo, banner vb. tasarımlar

Ziyaretçi defteri,

İletişim formu,

Çeşitli kullanıcı arabirimleri vs.

Freehand

Macromedia Freehand olarak piyasaya sunulan program MX (v.11) sürümü ile birlikte Adobe tarafından satın alınmış ve Adobe içinde muadili olan programlar (InDesing, Illustrator) olduğu için geliştirilmesi durdurulmuştur.

Vektörel çizim üzerine geliştirilmiş bir masaüstü çizim uygulamasıdır.
Türkiye’de halen yaygın şekilde kullanılmaktadır. Freehand ile vektörel grafikler oluşturmak oldukça kolaydır.

Fireworks

Fireworks programı daha çok internette web tasarımı yapmaya, grafik sayfaları ve animasyonlar hazırlamaya imkân veren gelişmiş bir grafik programıdır. Sadece web için kullanılyor olması onu Photoshop’tan ayırır.

Photoshop gibi gelişmiş özellikler içermez, ama web tasarımı konusunda
birçok seçenek sunar.

Açılır pop-up menüler, animasyonlar, güçlü efektler ve bunun gibi bir çok imkânlarla estetik web sayfaları hazırlayabilirsiniz.

Fireworks programının artı bir özelliği de Adobe’nin tüm programlarıyla
uyum içinde çalışmasıdır.

Fireworks ile:

Bir web sayfasını tamamen grafik tabanlı hazırlayabileceğiniz gibi, tek başına küçük bannerlar, hareketli resimler de yapabilirsiniz.

Ekstra özellikleri olduğu gibi mutlaka Photoshop kullanmak isteyeceğiniz negatif yönleri de vardır.

Kısaca; Fireworks, her açıdan son sürümünde eklenen gelişmiş özellikleri ile bir web tasarımcısına ihtiyacı olan her şeyi sunuyor

diyebiliriz.

Ajax

Ajax anlam olarak Javascript ve XML’in farklı zamanlarda kullanması anlamına geliyor. Özetle sayfanız yüklendikten sonra sayfanızın hala veri alıyor ya da gönderiyor olmasıdır.

Ajax, 2005 yılında Google’ın önerisi üzerine popülerleşmiştir. Ajax yeni bir dili programlama değildir, mevcut dilin farklı şekillerde kullanılmasıdır.

Ajax, javascript ile yazılır ve ASP, PHP, ColdFusion gibi diğer diller ile zengin ve aktif olarak kullanılabilir.

FTP

FTP’nin açılımı File Transfer Protocol’dür. Örneğin bir bilgisayar firması yeni donanım sürücülerini, bedava yazılımlarını kullanıcılara FTP sunucusu üzerinden iletebilir.

Çoğu FTP sunucusu hat kesintisi gibi durumlarda yarıda kalan dosyaları
kaldığı yerden indirmeyi destekler.

Örneğin bedava Web alanı veren bir siteden bir alan aldınız; hazırladığınız Web sayfalarını oluşturan dosyaları bu alana göndermek istiyorsunuz. Bu işlemi, size verilen kullanıcı ismi ve şifrenizi kullanarak ilgili FTP sunucusuna gönderebilirsiniz. FTP sunucuları PC’nizde olduğu gibi klasörler şeklinde düzenlenmiştir ve herkesin kullanımına açık olan klasörler genelde pub adlı klasör altında bulunur.

Gelişmiş özelliklere sahip bir FTP programının adını vermek gerekirse, CuteFTP ve Filezilla yı örnek gösterebiliriz.

Photoshop kullanılarak yapılmış tasarımı, Slice Aracıyla kesip, save for web‘de HTML and images seçeneğini işaretleyerek kaydederseniz, kesilmiş resimler ve html sayfa oluşturulur. Tasarım yapıldıysa, çok kısa sürede ve çok kolay olarak web sayfanız hazırdır…

Bu sayfa server’a yüklenip, internet dünyasına açılabilir.

Ama bazı sorunlar sizi rahatsız edecektir, bunları bulmaya çalışalım…

• Resim ve yazıları Photoshopta hazırladıysanız, yazılar üzerinde düzeltme yapmak gerektiğinde en baştan başlamız gerekir.
• Farklı yazıları olan sayfalar için tekrar photosohopta hazırlamanız gerekir, ortak fotoğraflar olduğu halde onları tekrar tekrar oluşturursunuz…
• Tümü resimden olan sayfalar, dosya boyutu olarak büyük olduğu için sayfalar çok geç açılır…

Dreamweaver ile, Photoshopta oluşturduğunuz html sayfaları düzenlerseniz, bu sorunları aşarsınız…

Elinizde Photoshopta sizin (ya da tasarımcı) tarafından hazırlanmış bir çalışma olduğunu varsayarak, başlıyoruz..

Kesme işlemleri

Slice Aracı ile kesilmesini istediğiniz kısımları işaretlemeniz gerekir.

Önceden guide ile keseceğiniz yerleri belirlemeniz iyi olur. İşaretlerken nerelerden keseceğinizi düşünün, ve tam kenarlarına yerleştirmeye özen gösterin. Büyüteçle sayfaya yakınlaşıp çizgileri kontrol etmeyi unutmayın.

Snap ve Snap To ayarını yapmayı unutmayı unutmayın, Slice Aracını rahat kullanırsınız. Çünkü snap To bölümünden seçtiğiniz guides, grid, Layers vs, yaptığınız çizimin, seçenekleriniz doğrultusunda kolayca (guides’a, grid’e, Layers’a vs.) yapışmasını sağlar

Kesilmesi gereken yerleri slice Tool ile tek tek işaretleyin…

İşaretlemeniz bitince, File / Save for Web bölümüne gelin. Resmin özelliklerine göre gif ya da jpg formatını seçin, HTML and Images seçeneğini işaretleyin ve kaydedin

Verdiğiniz isim, resimlerin isimleri olarak kullanılacaktır bu yüzden daha kısa bir isim seçmeniz, harf kalabalıklığını önler

ps-ile-tasarim-yapma1_01.gif yerine
1_01.gif olarak görünmesi daha iyidir…

Sayfamızı kaydederken oluşan images klasörünün içinde kesilmiş resimleri görüyorsunuz.

 

 

 

Bu dersimizde videolu anlatım ile PSD tasarımımızı CSS’e aktarımı işleyeceğiz.

PSD to CSS esnasında karşımıza çıkabilecek sorunlar ve yapmamız gerekenleri anlatan video, oldukça bilgi verici.

İyi seyirler dileriz…

Dersi anlatan: Tayfun Erbilen

Artık yavaş yavaş CSS 3 ve HTML 5′ten bahsetmeye başlamak gerek. Aslında bir çoğumuz web trendi gereği oval nesneler ve arayüzler görmeye bunları sayfalarımızda uygulamaya dolayısıyla CSS 3′de border-radius kullanımına başladık. Ancak bu konuyla ilgili ben tatmin edici türkçe bir kaynağa denk gelmedim. Bu makalemde CSS 3 ile gelen radius(ovallik verme) özelliğinin hangi browserlarda nasıl yorumlandığını anlatacağım.

Aşağıdaki resimde de görüldüğü üzere iki buton var bunlardan bir tanesi CSS 2.1 ile yapılan background’a image vererek yaptığımız klasik buton diğeri ise CSS 3 ile gelen radius ve gradient özellikleri ile yapılabilecek bir buton. Bu noktada bir parentez açayım. Gradient yani deglare özelliği CSS 3 ile gelen diğer özelliklerden biridir. Bunu da ilerleyen zamanlarda bir makaleyle ele alacağım.

Her browser’ın CSS ve HTML kodlarını kendine göre yorumlama şekli vardır. Bu yorumlama farkı browser’ları geliştiren firmaların kullandıkları layout engine olarak adlandırılan web içeriği görüntüleme teknolojilerinin farklılıklarından (framework farklılıklarından) kaynaklanmaktadır.

Bu framework’ler Safari ve Chrome’da Webkit, Firefox’ta Gecko, Opera’da Presto ve Internet Explorer tarayıcılarında Trident olarak karşımıza çıkar. Dolayısıyla UI’ların en çok sıkıntısını çektiği noktalardan biridir her browser’a uygun CSS kodu yazmak hem CSS dosyasını şişir hemde insana sırf iş keser. Her ne kadar IE 9 ile CSS 3 sıkıntıları daha da azalmışta olsa Microsoft’un CSS’i yorumlama tarafında özellikle IE 8, IE 7 ve IE 6′da ciddi sıkıntılar var. (Ben IE’yi CSS 3 için kasmamanızı öneririm. Tabi bu sitenizin hedef kitlesine göre değişir).

Radius temelde border-radius olarak tanımlanır. Form nesnelerine (buton,textbox, textarea, combo vb..) , division’lara ve hatta table’larınıza bile uygulayabilirsiniz. Şimdi gelin radius’u hangi browser’da nasıl kullanacağımıza bakalım.

Firefox border-radius kullanımı:

-moz-border-radius: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin 4 tarafına istediğiniz açısal değerde ovallik vermenizi sağlar)

 

.xStyle { -moz-border-radius: 7px; }

-moz-border-radius-topleft: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin üst sol köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

 

-moz-border-radius-topright: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin üst sağ köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

 

-moz-border-radius-bottomright: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin alt sağ köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

 

-moz-border-radius-bottomleft: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin alt sol köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

 

.xStyle {
-moz-border-radius-topleft: 9px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomright: 9px;
-moz-border-radius-bottomleft: 7px;
}

-moz-border-radius:<ovallik değeri1> <ovallik değeri2> <ovallik değeri3> <ovallik değeri4> (şeklindeki kullanımda ilk değer için sol üst, ikinci değer için sağ üst, üçüncü değer için sağ alt, dördüncü değer sol alt köşeler için istediğiniz açısal değerde ovallik vermenizi sağlar)

 

.xStyle { -moz-border-radius:10px 5px 10px 5px; }

Chrome ve Safari border-radius kullanımı:

-webkit-border-radius: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin 4 tarafına istediğiniz açısal değerde ovallik vermenizi sağlar)

 

.xStyle { -webkit-border-radius: 7px; }

-webkit-border-top-left-radius: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin üst sol köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

 

-webkit-border-top-right-radius: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin üst sağ köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

 

-webkit-border-bottom-right-radius: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin alt sağ köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

 

-webkit-border-bottom-left-radius: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin alt sol köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

 

.xStyle {
-webkit-border-top-left-radius: 9px;
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-right-radius: 9px;
-webkit-border-bottom-left-radius: 7px;
}

-webkit-border-radius:<ovallik değeri1> <ovallik değeri2> <ovallik değeri3> <ovallik değeri4> (şeklindeki kullanımda ilk değer için sol üst, ikinci değer için sağ üst, üçüncü değer için sağ alt, dördüncü değer sol alt köşeler için istediğiniz açısal değerde ovallik vermenizi sağlar)

 

.xStyle { -webkit-border-radius:10px 5px 10px 5px; }

Opera ve Internet Explorer 9+ border-radius kullanımı:

border-radius: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin 4 tarafına istediğiniz açısal değerde ovallik vermenizi sağlar)

 

.xStyle { border-radius: 7px; }

border-top-left-radius: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin üst sol köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

 

border-top-right-radius: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin üst sağ köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

 

border-bottom-right-radius: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin alt sağ köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

 

border-bottom-left-radius: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin alt sol köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

 

.xStyle {
border-top-left-radius: 9px;
border-top-right-radius: 7px;
border-bottom-right-radius: 9px;
border-bottom-left-radius: 7px;
}

border-radius:<ovallik değeri1> <ovallik değeri2> <ovallik değeri3> <ovallik değeri4> (şeklindeki kullanımda ilk değer için sol üst, ikinci değer için sağ üst, üçüncü değer için sağ alt, dördüncü değer sol alt köşeler için istediğiniz açısal değerde ovallik vermenizi sağlar)

 

.xStyle { border-radius:10px 5px 10px 5px; }

Böylece Firefox, Chrome, Safari, Opera ve IE 9.0 browser’lar için istediğiniz gibi border-radius’u uygulayabilirsiniz.

 

Dersi anlatan: Ertuğrul Haskan

Bu web tasarım dersimizde, videolu anlatım yaparak CSS ile sıfırdan blog sitesi tasarımı yapalım.

Bu videolu anlatım için Tayfun Erbilen’e teşekkür ediyoruz.

Web tasarım dersleri ve Web tasarım kursu başlıklı konularımız, yeni videolu web tasarım dersleri ile sizlere eğitimleri ücretsiz sunmaktadır.

Bu web tasarım eğitim videosunda, sıfırdan bir blog görünümlü tasarım yapmayı anlattık. Web tasarım ile ilgili kendini geliştirmek isteyenlerin, mutlaka izlemesi gereken bir video… Videoda yapılan tasarımı ekten indirebilirsiniz. Video eğitim süresi toplam 1 saatten fazladır.

3 bölüm halinde aşağıdan direk olarak izleyebilirsiniz.

Videoda yapılan nihai tasarımı aşağıdaki resimde görebilirsiniz.

BİRİNCİ WEB TASARIM EĞİTİM VİDEOSU:

İKİNCİ WEB TASARIM EĞİTİM VİDEOSU (DEVAMI):

ÜÇÜNCÜ WEB TASARIM EĞİTİM VİDEOSU (DEVAMI-SON):