SlideShare ist ein Scribd-Unternehmen logo
1 von 29
Konu= Web 2.0 Araçları Justin.Tv Grup Adı= GRUP 4 Grup Elemanları = Gökhan Kuzu  HalitSancak KemalÇapkın                           Murat Hacıhaliloğlu
Konu 1 = Web 2.0 Araçları
WEB 2.0 ARAÇLARI Teknolojinin ilerlemesiyle öğrenme ortamlarının farklılaştığını ve zenginleştiğini görüyoruz. Bu ortamlardan biri olan internetin yaygınlaşması beraberinde eğitim amaçları uygulamaları her geçen gün artıyor ve ilerlemelere paralel olarak bu ortamlarda kullanılabilecek öğrenme araçları sayısı da artıyor. Bireylerin ihtiyaçları doğrultusunda geliştirilen bu araçların yapısına baktığımızda aslında WEB 2.0 teknolojisinin bir parçası olarak ortaya çıktığını görüyoruz. Biz buradan yola çıkarak WEB 2.0 araçlarından eğitimde kullanımı giderek yaygınlaşan BLOG, WİKİ, PODCAST ve RSS’ ele alarak neler oldukları, eğitim sürecinde kullanımı, öğrenme ortamında bize getirdikleri ve örnek uygulamaları kapsamında açıklamalarda bulunacağız.
WEB 2.0 ARAÇLARI 1. Logolar Web 2.0 ile birlikte birçok firma logosunu yeniden tasarladı. Logolara daha parlak bir görüntü verilirken, yansıma efekti de bolca kullanıldı. Ayrıca pekçok yeni açılan servis, logosuna bir BETA ibaresi yerleştirmeyi alışkanlık haline getirdi. Eğer siz de logonuzda değişiklikler yapmak istiyorsanız bu kriterleri yerine getirmelisiniz.
WEB 2.0 ARAÇLARI 2. Butonlar Web 2.0 ile o eski çirkin gri butonlar terk edilmeye başlandı. Web tarayıcılarının sunduğu klasik butonları kullanmaktansa herkes imaj işleme yazılımlarıyla kendi butonunu kendi tasarlamaya başladı. Resim olarak hazırlanan bu butonlarda özellikle cam efekti ve renk geçiş (gradient) efekti hakim. Ayrıca birçok butonda, anlamlı küçük simgeler de kullanıldığını görüyoruz.
WEB 2.0 ARAÇLARI 3. Arkaplanlar Web 2.0 ile birlikte web sitelerinin önplanında bu kadar değişiklik yapılmışken arkaplan da unutulmadı tabi Web 2.0 sitelerinin arkaplanında çoğunlukla iki farklı teknik gözümüze çarpıyor. Bunlardan birincisi yatay şeritler iken ikincisi de düz renk geçişleri. Hazır olarak yatay şeritleri Stripe Generator veya Stripe Designer ile kolayca hazırlayabiliyorsunuz. Eğer ki yatay şeritlere göre gözü daha az yoran renk geçişli arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini indirebilirsiniz.
WEB 2.0 ARAÇLARI 4. Yuvarlak köşeli kutular Web 2.0 ile birlikte köşeleri yuvarlatılmış kutuların kullanımı çok yaygınlaştı. Köşeleri düz, kare veya dikdörtgen biçimde kutular kullanmak artık gerilerde kaldı. CSS‘nin 3.0 sürümüyle gelecek olan border-radius özelliğiyle de tamamen tarihe karışacağını düşünüyorum.
WEB 2.0 ARAÇLARI 5. Renk geçişleri Bir renkten farklı bir renge veya aynı rengin koyu tonundan daha açık tonuna geçiş yapmamızı sağlayan efekte gradient ismi veriliyor. Ve bu efekti web 2.0 tasarımlarında bolca görebiliyoruz. Butonlarda, arkaplanlarda veya menülerde… Tasarımlarınıza derinlik hissi katan bu efekti hazır olarak kullanabileceğiniz araçlar da mevcut.
WEB 2.0 ARAÇLARI 6. Rozetler İlk maddede yeni açılan pekçok web 2.0 servisinin, logolarına bir BETA ibaresi yerleştirdiklerinden bahsetmiştim. Bu beta ibaresini güçlendirmek için tasarımcılar, rozet (badge) şeklinde imajlardan faydalanıyorlar. Bu rozetlerin asıl kullanım amacı, kullanıcının dikkatini belli bir konu üzerinde yoğunlaştırmak.
WEB 2.0 ARAÇLARI 7. Menüler ve Sekmeler Navigasyon sistemi bir web sitesinde oldukça önemli bir yer tutar. Bu yüzden yeterince anlaşılır ve karmaşadan uzak bir navisyon sistemi tasarlamanız gerekiyor. Basitliğin ve kullanılabilirliğin önplanda tutulduğu Web 2.0 sitelerinde oldukça hoş menüler/sekmeler görüyoruz. Kendi web sitenizde bu menülerden/sekmelerden kullanmak için CSS Tab Designer isimli ücretsiz yazılımdan faydalanabilirsiniz. Bu yazılım ile yatay veya dikey olarak pratik bir şekilde menüler/sekmeler hazırlayabilmeniz mümkün. Dynamic Drive CSS Library ise bu konuda bir diğer güzel kaynak.
WEB 2.0 ARAÇLARI 8. Simgeler Web 2.0 sitelerindeki bir diğer trend ise simge kullanımıdır. Simgeleri kullanarak anlatmak istediğiniz veya dikkat çekmek istediğiniz bir konuya odaklanılmasını kolaylaştırabiliyorsunuz. Doğru yerde doğru simgeyi kullanırsanız son derece etkili görünümler elde edebilirsiniz. Eğer simge hazırlamak istemiyorsanız veya simge satın almak istemiyorsanız ücretsiz simge sunan siteleri kullanmanız gerekiyor.
WEB 2.0 ARAÇLARI 9. Renkler Renk kullanımı elbette yeni birşey değil ama web 2.0 ile birlikte üzerinde daha önemle durulan bir nokta. Artık birbiriyle maksimum düzeyde uyumlu renkler kullanılıyor. Renkler eskine oranla şimdi daha sıcak, daha canlı ve daha ferah. Kendi gözlemlerinde web 2.0 tasarımlarında ağırlıklı olarak mavi, yeşil, kırmızı, turuncu, pembe ve gri tonlarının kullandığını görüyorum.
WEB 2.0 ARAÇLARI 10. Yazı tipleri Web 2.0 ile birlikte özellikle yazı boyutlarındaki artış hemen göze çarpıyor. Eskisine oranda daha büyük ve daha kalın yazılar kullanılıyor. Yine basitlik adına eskisine oranla daha az yazı kullanıldığını görüyoruz. Böylece ferah bir görüntü elde etmek için web sayfasında yer yer boşluklar oluşturulmuş da oluyor. Yazı tipine gelince ise aslında bu konuda pek bir sınırlama yok.
Konu 2 = Justin.tv
Justin.tv Üyelik
Create Account’atıklarız
Gerekli bilgiler girilir.  Sign Up ‘a tıklarız
Justin.Tv CanlıYaYınYapımı
Broadcast ‘a Tıklarız
Browse ‘a tıklarız
LogomuzuseçerOpen’atıklarız
Gerekli bilgiler seçilip  Save &Continue ‘a tıklarız
Allow’atıklarız
Start Broadcast ‘a Tıklarız
Bu Buttonabasıpyayınımızıkayıtederiz
Stop Broadcast ‘a tıklarYayınıdurduruz
BİZİ DİNLEDİĞİNİZ İÇİN TEŞEKKÜRLER
KAYNAKÇA http://bote.hacettepe.edu.tr/wiki/index.php/ARA%C3%87LAR http://www.webmaster.ziranbula.com/genel/web-20-tasarim-araclari-nedir-ne-degildir.html www.justin.tv

Weitere ähnliche Inhalte

Andere mochten auch

Tihuana pop rock brasil
Tihuana   pop rock brasilTihuana   pop rock brasil
Tihuana pop rock brasil
dancepartyhits
 
BHSAD. 2nd semester (report)
BHSAD. 2nd semester (report)BHSAD. 2nd semester (report)
BHSAD. 2nd semester (report)
guest6b08098
 
Evaluation of a website - manybooks.net
Evaluation of a website - manybooks.netEvaluation of a website - manybooks.net
Evaluation of a website - manybooks.net
maggmiss
 

Andere mochten auch (15)

Speech 20131019
Speech 20131019Speech 20131019
Speech 20131019
 
KALKINMA AJANSLARI PROJE UYGULAMA SÜREÇLERİ
KALKINMA AJANSLARI PROJE UYGULAMA SÜREÇLERİKALKINMA AJANSLARI PROJE UYGULAMA SÜREÇLERİ
KALKINMA AJANSLARI PROJE UYGULAMA SÜREÇLERİ
 
Poster Analysis
Poster AnalysisPoster Analysis
Poster Analysis
 
Managed Metadata - The Good, The Bad, and The Ugly
Managed Metadata - The Good, The Bad, and The UglyManaged Metadata - The Good, The Bad, and The Ugly
Managed Metadata - The Good, The Bad, and The Ugly
 
Tihuana pop rock brasil
Tihuana   pop rock brasilTihuana   pop rock brasil
Tihuana pop rock brasil
 
Washington Dossier August 1976
Washington Dossier August 1976 Washington Dossier August 1976
Washington Dossier August 1976
 
Bob marley
Bob marleyBob marley
Bob marley
 
BHSAD. 2nd semester (report)
BHSAD. 2nd semester (report)BHSAD. 2nd semester (report)
BHSAD. 2nd semester (report)
 
Planificación Final
Planificación FinalPlanificación Final
Planificación Final
 
Tipi - Building Rich User Interfaces
Tipi - Building Rich User InterfacesTipi - Building Rich User Interfaces
Tipi - Building Rich User Interfaces
 
Estudo requalifvalorizbarrinhaesmoriz
Estudo requalifvalorizbarrinhaesmorizEstudo requalifvalorizbarrinhaesmoriz
Estudo requalifvalorizbarrinhaesmoriz
 
Evaluation of a website - manybooks.net
Evaluation of a website - manybooks.netEvaluation of a website - manybooks.net
Evaluation of a website - manybooks.net
 
I2 1er 2009
I2 1er 2009I2 1er 2009
I2 1er 2009
 
Jokes
JokesJokes
Jokes
 
Sample 5 Step Presentation
Sample 5 Step PresentationSample 5 Step Presentation
Sample 5 Step Presentation
 

Ähnlich wie 418

Web 2.0 teknolojileri
Web 2.0 teknolojileriWeb 2.0 teknolojileri
Web 2.0 teknolojileri
Meriç Olgun
 
1.word web 2.0 kavramı
1.word   web 2.0 kavramı1.word   web 2.0 kavramı
1.word web 2.0 kavramı
Hüseyin Bicen
 

Ähnlich wie 418 (20)

Web 2.0 teknolojileri
Web 2.0 teknolojileriWeb 2.0 teknolojileri
Web 2.0 teknolojileri
 
Web ortamında çoklu ortam tasarımı
Web ortamında çoklu ortam tasarımıWeb ortamında çoklu ortam tasarımı
Web ortamında çoklu ortam tasarımı
 
Net beans nedir
Net beans nedirNet beans nedir
Net beans nedir
 
Web 2
Web 2Web 2
Web 2
 
Sunu1
Sunu1Sunu1
Sunu1
 
Css 2011
Css 2011Css 2011
Css 2011
 
Sektörden Haberler Emarsys Ekim 2013
Sektörden Haberler Emarsys Ekim 2013Sektörden Haberler Emarsys Ekim 2013
Sektörden Haberler Emarsys Ekim 2013
 
Wordpress'e Giriş Eğitimleri
Wordpress'e Giriş EğitimleriWordpress'e Giriş Eğitimleri
Wordpress'e Giriş Eğitimleri
 
Web
WebWeb
Web
 
Google BigQuery Servisi İle Büyük Veri İşlemleri Ve Sorgu Sonuçlarının BIME İ...
Google BigQuery Servisi İle Büyük Veri İşlemleri Ve Sorgu Sonuçlarının BIME İ...Google BigQuery Servisi İle Büyük Veri İşlemleri Ve Sorgu Sonuçlarının BIME İ...
Google BigQuery Servisi İle Büyük Veri İşlemleri Ve Sorgu Sonuçlarının BIME İ...
 
Uni stay 2017-2018
Uni stay 2017-2018 Uni stay 2017-2018
Uni stay 2017-2018
 
05115238 web2.0 etw
05115238 web2.0 etw05115238 web2.0 etw
05115238 web2.0 etw
 
Vikiler bloglar
Vikiler bloglarVikiler bloglar
Vikiler bloglar
 
Css proje
Css projeCss proje
Css proje
 
Sunu
SunuSunu
Sunu
 
Developer Tools
Developer ToolsDeveloper Tools
Developer Tools
 
1.word web 2.0 kavramı
1.word   web 2.0 kavramı1.word   web 2.0 kavramı
1.word web 2.0 kavramı
 
Sunum.1.2
Sunum.1.2Sunum.1.2
Sunum.1.2
 
Css video
Css videoCss video
Css video
 
Web Tasarım Teknikleri
Web Tasarım TeknikleriWeb Tasarım Teknikleri
Web Tasarım Teknikleri
 

418

  • 1. Konu= Web 2.0 Araçları Justin.Tv Grup Adı= GRUP 4 Grup Elemanları = Gökhan Kuzu HalitSancak KemalÇapkın Murat Hacıhaliloğlu
  • 2. Konu 1 = Web 2.0 Araçları
  • 3. WEB 2.0 ARAÇLARI Teknolojinin ilerlemesiyle öğrenme ortamlarının farklılaştığını ve zenginleştiğini görüyoruz. Bu ortamlardan biri olan internetin yaygınlaşması beraberinde eğitim amaçları uygulamaları her geçen gün artıyor ve ilerlemelere paralel olarak bu ortamlarda kullanılabilecek öğrenme araçları sayısı da artıyor. Bireylerin ihtiyaçları doğrultusunda geliştirilen bu araçların yapısına baktığımızda aslında WEB 2.0 teknolojisinin bir parçası olarak ortaya çıktığını görüyoruz. Biz buradan yola çıkarak WEB 2.0 araçlarından eğitimde kullanımı giderek yaygınlaşan BLOG, WİKİ, PODCAST ve RSS’ ele alarak neler oldukları, eğitim sürecinde kullanımı, öğrenme ortamında bize getirdikleri ve örnek uygulamaları kapsamında açıklamalarda bulunacağız.
  • 4. WEB 2.0 ARAÇLARI 1. Logolar Web 2.0 ile birlikte birçok firma logosunu yeniden tasarladı. Logolara daha parlak bir görüntü verilirken, yansıma efekti de bolca kullanıldı. Ayrıca pekçok yeni açılan servis, logosuna bir BETA ibaresi yerleştirmeyi alışkanlık haline getirdi. Eğer siz de logonuzda değişiklikler yapmak istiyorsanız bu kriterleri yerine getirmelisiniz.
  • 5. WEB 2.0 ARAÇLARI 2. Butonlar Web 2.0 ile o eski çirkin gri butonlar terk edilmeye başlandı. Web tarayıcılarının sunduğu klasik butonları kullanmaktansa herkes imaj işleme yazılımlarıyla kendi butonunu kendi tasarlamaya başladı. Resim olarak hazırlanan bu butonlarda özellikle cam efekti ve renk geçiş (gradient) efekti hakim. Ayrıca birçok butonda, anlamlı küçük simgeler de kullanıldığını görüyoruz.
  • 6. WEB 2.0 ARAÇLARI 3. Arkaplanlar Web 2.0 ile birlikte web sitelerinin önplanında bu kadar değişiklik yapılmışken arkaplan da unutulmadı tabi Web 2.0 sitelerinin arkaplanında çoğunlukla iki farklı teknik gözümüze çarpıyor. Bunlardan birincisi yatay şeritler iken ikincisi de düz renk geçişleri. Hazır olarak yatay şeritleri Stripe Generator veya Stripe Designer ile kolayca hazırlayabiliyorsunuz. Eğer ki yatay şeritlere göre gözü daha az yoran renk geçişli arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini indirebilirsiniz.
  • 7. WEB 2.0 ARAÇLARI 4. Yuvarlak köşeli kutular Web 2.0 ile birlikte köşeleri yuvarlatılmış kutuların kullanımı çok yaygınlaştı. Köşeleri düz, kare veya dikdörtgen biçimde kutular kullanmak artık gerilerde kaldı. CSS‘nin 3.0 sürümüyle gelecek olan border-radius özelliğiyle de tamamen tarihe karışacağını düşünüyorum.
  • 8. WEB 2.0 ARAÇLARI 5. Renk geçişleri Bir renkten farklı bir renge veya aynı rengin koyu tonundan daha açık tonuna geçiş yapmamızı sağlayan efekte gradient ismi veriliyor. Ve bu efekti web 2.0 tasarımlarında bolca görebiliyoruz. Butonlarda, arkaplanlarda veya menülerde… Tasarımlarınıza derinlik hissi katan bu efekti hazır olarak kullanabileceğiniz araçlar da mevcut.
  • 9. WEB 2.0 ARAÇLARI 6. Rozetler İlk maddede yeni açılan pekçok web 2.0 servisinin, logolarına bir BETA ibaresi yerleştirdiklerinden bahsetmiştim. Bu beta ibaresini güçlendirmek için tasarımcılar, rozet (badge) şeklinde imajlardan faydalanıyorlar. Bu rozetlerin asıl kullanım amacı, kullanıcının dikkatini belli bir konu üzerinde yoğunlaştırmak.
  • 10. WEB 2.0 ARAÇLARI 7. Menüler ve Sekmeler Navigasyon sistemi bir web sitesinde oldukça önemli bir yer tutar. Bu yüzden yeterince anlaşılır ve karmaşadan uzak bir navisyon sistemi tasarlamanız gerekiyor. Basitliğin ve kullanılabilirliğin önplanda tutulduğu Web 2.0 sitelerinde oldukça hoş menüler/sekmeler görüyoruz. Kendi web sitenizde bu menülerden/sekmelerden kullanmak için CSS Tab Designer isimli ücretsiz yazılımdan faydalanabilirsiniz. Bu yazılım ile yatay veya dikey olarak pratik bir şekilde menüler/sekmeler hazırlayabilmeniz mümkün. Dynamic Drive CSS Library ise bu konuda bir diğer güzel kaynak.
  • 11. WEB 2.0 ARAÇLARI 8. Simgeler Web 2.0 sitelerindeki bir diğer trend ise simge kullanımıdır. Simgeleri kullanarak anlatmak istediğiniz veya dikkat çekmek istediğiniz bir konuya odaklanılmasını kolaylaştırabiliyorsunuz. Doğru yerde doğru simgeyi kullanırsanız son derece etkili görünümler elde edebilirsiniz. Eğer simge hazırlamak istemiyorsanız veya simge satın almak istemiyorsanız ücretsiz simge sunan siteleri kullanmanız gerekiyor.
  • 12. WEB 2.0 ARAÇLARI 9. Renkler Renk kullanımı elbette yeni birşey değil ama web 2.0 ile birlikte üzerinde daha önemle durulan bir nokta. Artık birbiriyle maksimum düzeyde uyumlu renkler kullanılıyor. Renkler eskine oranla şimdi daha sıcak, daha canlı ve daha ferah. Kendi gözlemlerinde web 2.0 tasarımlarında ağırlıklı olarak mavi, yeşil, kırmızı, turuncu, pembe ve gri tonlarının kullandığını görüyorum.
  • 13. WEB 2.0 ARAÇLARI 10. Yazı tipleri Web 2.0 ile birlikte özellikle yazı boyutlarındaki artış hemen göze çarpıyor. Eskisine oranda daha büyük ve daha kalın yazılar kullanılıyor. Yine basitlik adına eskisine oranla daha az yazı kullanıldığını görüyoruz. Böylece ferah bir görüntü elde etmek için web sayfasında yer yer boşluklar oluşturulmuş da oluyor. Yazı tipine gelince ise aslında bu konuda pek bir sınırlama yok.
  • 14. Konu 2 = Justin.tv
  • 17. Gerekli bilgiler girilir. Sign Up ‘a tıklarız
  • 18.
  • 23. Gerekli bilgiler seçilip Save &Continue ‘a tıklarız
  • 25. Start Broadcast ‘a Tıklarız
  • 27. Stop Broadcast ‘a tıklarYayınıdurduruz