Web Tasarım Dersini Nasıl İşliyorsunuz?

Kodla Büyü

fuko88

Üye
Mesajlar
36
Merhaba arkadaşlar,

Uzun zamandır web tasarım dersine giriyorum. Her yıl dersin içeriği ve işlenişi ile ilgili geliştirmeler yapıyorum. Bu başlıkta bunları paylaşmak ve tartışmak istiyorum.

HTML ve CSS konularını w3school takip ederek güncel haliyle öğretmeye çalışıyorum. Bunu yaparken çok detay olan etiketleri ya da özellikleri göstermiyorum.

Ör: formlarda HTML5 için <tel> etiketi geldi bu ve benzeri etiketler de var şuradan bakabilirsiniz diyip geçiyorum. Bilmeyen arkadaşlar için yazmak istiyorum web tasarım dersi çok geniş bir yelpazeyle anlatılıyor dolayısıyla her konuda isteseniz de derine inemiyorsunuz. CSS içinde benzer durum söz konusu transition konusunu çok yüzeysel gösteriyorum hiç anlatmadığım özellikler de var (benim de bilmediğim tabi)

Dream ile başlayan programı hiç kullanmıyorum tamamen Sublime Text Editor kullanıyoruz.

Dream kullanmadığımız için 1. dönem sonu veritabanı ve spry (artık desteklenmiyor zaten) göstermiyorum.
Bunlar yerine Bootstrap kullanarak nasıl sayfa hazırlanır bunu görüyoruz.
Fontawesome gibi kütüphanelerin projeye eklenip kullanılması (çocukların çok eğlendiği bir konu)

Javascript konusuna geldiğimde temel javascipt bilgisini verdikten sonra (değişken tanımlama, fonksiyon yapısı vb) Çok derine girmeden js bitirip hemen jquery başlıyorum. jqueryde dom yapısını nasıl kullanacaklarını gösterip basit hide/show gibi işleri yapmayı anlatıyorum.

Hazır js ve jquery kütüphanelerini nasıl kullanacaklarını gösterip çeşitli ödevler vererek hazır kütüphaneler kullanarak sayfa tasarımı bekliyorum.

Bu yıla kadar ASP.NET gösterdim ancak ASP.Net konuları hemen hemen mart ortalarında/sonlarında başlıyor zaten Mayıs ortasına doğru sınavlar olduğundan iki aydan kısa bir zaman kalıyor. ve ASP.NET tam öğrenilemeden 11. sınıf bitiyor.

Burası Önemli
Bu yıl ASP.net vermeden PHP verebilir miyim diye düşünüyorum. 11. sınıfta php temellerini attıktan sonra 12. sınıfta php konularında çok daha fayda sağlanabileceğini düşünüyorum.

2017/2018 Güncelleme
Geçen yıl bootstrap ile sayfa tasarımında epey ilerledik çok güzel çalışmalar oldu. Ayrıca çocuklar arasında bir yarışma da düzenledik. Sitesine en çok ziyaretçi çeken öğrenciye ödül verdik. Heyecan oldu çocuklar da Google Analytics gibi araçları tanıdılar.
11. sınıflarda PHP eğitimi de başarılı oldu. Bu yıl meyvelerini toplayacağımızı düşünüyorum.

WEB Tasarım Dersinde Siz Nasıl Bir Yol İzliyorsunuz?
 
Son düzenleme:
Valla hocam ben ortaokul öğretmeniyim. Web tasarımı anlatmıyorum. Çünkü okulumda zaten laboratuar da yok. Onun için sadece şu soruna cevap verebilirim: ASP vermeden de elbette PHP verilir. Birbirlerini sınırlandıracak şeyler değil. HTML bilmesi bir kimsenin PHP öğrenebilmesi için yeterlidir.
 
Hocam tebrik ederim çok güzel isliyorsunuz. Ben de hemen hemen boyle yapmaya çalışıyorum. Öğrenci seviyesine göre değişiyor biraz tabi. Ama asp.net olayı ile ilgili bir nokta var. Modüler eğitimde yıldızli derslerin konu içerikleri değiştirilemez diye bir yazı vardı yanlış hatırlamıyorsam
 
hocam veritabanının olmaması büyük eksiklik bence pdo işleyebilirsiniz 1 bilemediniz 2 haftada verebilirsiniz diye düşünüyorum. asp.net e ayıracağınız zamanı pdo anlatmaya verebilirsiniz. statik siteler her zaman iş görmeyebilir. ayrıca cms leri de öğretmek iyi olur öğrencilere sonuçta ihtiyaçlarının %70-80 ini karşılayacaktır cms ler. javascript e çok zaman ayırmaya gerek yok zaten jquery öğretiyormuşsunuz. css konusunda biraz da colorzilla vb siteleri gösterip oralardan hazır renkler geçişler kullanmayı öğretebilirsiniz.
 
Ben dersi anlatmaya çalışıyorum.. Öğrencilerin yarısından fazlası hala bunlar nerede işimize yarayacak diyor.. boş kaldıklarında internette dolaştıklarında yanlarına gidip bak bu sitenin aynısını sen de tasarlayabilirsin diyorum nasıl yapacam diyor?
Form nesnelerini anlattım, radio buttondan checkbox a, combo'ya kadar her şeyi gösterdim ama yeni nesil uğraşmak istemiyor, hep hazır hep hazır.. Ben ne yapacağımı şaşırdım..
Dreamweaver arayüzünü anlatıyorum sınıfın umrunda değil.. Yani çocuklar maalesef amaçsız olarak okula gidip geliyorlar.. Bölümde diğer zümrelerime de durumu anlattım, onlardan da grafik ani. ye girenler, veri tabanına girenler de aynı dertlerden muzdarip.. Yeni nesil çalışmayı sevmiyor..
 
Ben de html ve css anlattiktan sonra en az 3 tane psd tasarim indirip psd to css gosteriyorum ilk donem.ilk donemin sonlarinda bootstrap ile de temel bir site nasil yapilir ondan bahsediyorum.ikinci donem javascript temel programlamadan sonra olaylar ve bikac form ornegi daha sonra asp.net masterpage yapisiyla ilgili en az yine 3 site yapiyoruz veritabani na detayli bakilamiyor zaten cocuklarin ozel istek ve ilgisine dayali cunku veritabani ozel yetenek de istyor bana gore arayuz tasarimi daha basit oldugu icin cocuklar backend de zorlaniyorlar tabi haliyle
 
ilk dönem html + css ile enaz 5 tane sıfırdan bitene kadar web sitesi yaptırıyorum kasım ayının sonuna kadar. Aralık ayında bootstrap gösteriyorum ve 3 - 4 tane de sıfırdan başlayarak site hazırlıyoruz.

Geçen yıllarda ikinci dönem php gösterdim hep. pdo ile veritabanı üzerinde yönetim paneli ve site olacak şekilde siteler hazırladık. Ama sınıf genelinde başarı ilk döneme göre %15 - %20 lere düştü. yapamayanlar d yapabilenler aracılığıyla ödevlerini projelerini hazırlayıp teslim ettiler.

her sene öğrencilerime bir site açtırıyorum. bir domain alıp her öğrenciye bir sub domain açarak tüm öğrencilere ftp bilgilerini vererek sitelerini yayınlatmayı da öğretiyorum. php ile yapılan dinamik siteleri de yayınlamayı gösteriyorum.

bu sene ikinci dönem değişiklik olsun diye asp.net mvc göstermeye başladım. sanırım veritabanı göstermeyeceğim. masterpage yapısıyla bootstrap kullanarak siteler tasarlayacağız diye planlarım var.

Geçen yıllarda ikinci dönem php kullandığım zamanlarda, bölüm zümresinde karar olarak belirtiyorduk asp.net yerine php kullanacağımızı.
 
bizde her öğrencinin bir flash diski var sadece web dersi için. Başlar başlamaz her konu ile ilgili klasör ve her konuda bir html sayfası oluşuyor. Hem işlemin nasıl yapılacağına dair not oluyor bu sayfada hem de konunun uygulaması. Konu ilerledikçe sayfalar ve şablonlar çıkmaya başlıyor 5 6 tane basit içerikli(3 4 sayfadan oluşan, öylesine yapılmış, basit uygulamalar) 1 tane derli toplu istedikleri herhangi bir konu ile ilgili web sayfası yapıyorlar. Bu web sayfasında saydamlık, hareketlendirme, slider, tek sayfa site çalışması, js kullanımı gibi konular bulunuyor. Bu konuları her öğrenci bireysel olarak kullanıyor sayfasında. Araştırdıkları veya ilgilerini çeken bir konu olduklarında kendi sayfalarında kullanıyorlar, bunu sınıfla paylaşıyoruz, nasıl yapılacağını anlatıyoruz. Böylece dönem sonunda en az bir tane ele avuca gelir ürün almış oluyoruz.
 
Html css ile static divan yapısını 4-5 site ile halledip bootstrap daha sonra javascript jquery vakit kalırsa php pdo inşallah
 
1. dönem html, kisaca dreamweaver , Css
Uygulamalar örnek site olacak şekilde,
Her dönemde performans olarak site veriyorum.
2. Dönem jscript, asp..
Veritabanı nini dönem sonunda isliyorum..(üye girişi, kaydı)
 
dokmeefrail' Alıntı:
hocam veritabanının olmaması büyük eksiklik bence pdo işleyebilirsiniz 1 bilemediniz 2 haftada verebilirsiniz diye düşünüyorum. asp.net e ayıracağınız zamanı pdo anlatmaya verebilirsiniz. statik siteler her zaman iş görmeyebilir. ayrıca cms leri de öğretmek iyi olur öğrencilere sonuçta ihtiyaçlarının %70-80 ini karşılayacaktır cms ler. javascript e çok zaman ayırmaya gerek yok zaten jquery öğretiyormuşsunuz. css konusunda biraz da colorzilla vb siteleri gösterip oralardan hazır renkler geçişler kullanmayı öğretebilirsiniz.
11. sınıfta Veritabanını ASP.Net içinde gösteriyordum ama pdo ile hiç göstermedim. 12. sınıfta da phpde veritabanı gösteriyoruz zaten. CMS konusuna 11. sınıfta girmedim ama 12. sınıfın müfredatında var. 12. sınıfta anlatıyorum. Teşekkürler

hastasıyız dede' Alıntı:
hocam kaynaklarınız varsa paylaşabilirmisiniz bende dyk da haftasonu bu konuları anlatacaım.
Kaynaklarım: w3school ve Fatih Hayrioğlunun CSS kitabı

Öğrencilere canlı site açtırma konusunda başka bir başlıkta yazdıklarımı burada da yazayım:
Bi yıl kendime host alıp 30 ftp hesabı açıp çocuklara dağıttım sonuç 2-3 öğrenci dışında ilgi yok.
Başka bi yıl öğrencilere ücretsiz tk domain alıp reseller paket aldım ve çocuklara ücretsiz cpanel verdim sonuç: 2-3 öğrenci dışında ilgi yok
Eskiden bedava hosting arıyordum sonra şunu fark ettim ki insanoğlu için bedavanın bir değeri olmuyor. Para verecek ki değerini anlasın.
Geçen yıldan beri isteyenlere en ucuz ve kaliteli ücretli domain+hosting nereden alınır anlatıyorum. öğrenci ininal kart alıp para yüklüyor. Gerçek bir alan adı ve hosting nasıl alınır nasıl yönetilir A'dan Z'ye öğreniyor. para verdiği için de içerik ekliyor. Bu sefer 8-9 öğrenci ilgili. Geçen yıldan kendi alan adı ve hostingini alanlardan iki tanesi başkaları için alan adı hosting alıp iş yapmış mutlu oldum. Bu arada Alan adı + 1 yıllık hosting 35TL'ye buldum öğrenciler için bile uygun olduğunu düşünüyorum. Ayrıca staj başvurusunda da kendi sitesi olanlar bir adım önde oluyor.

Web Tasarım Dersini İşleyen Diğer Arkadaşlar da yazarsa sevinirim.
 
Paylaşımlarınız çok faydalı.
Baştan sona full uygulama için netür site yaptırıyorsunuz ?
Html css öğrendik. Şimdilik bunlarlı kullanarak bir iki full site yaptırmak istiyorum

Sonra bootstrap js ve jquery eklicem

Site içeriği ile ilgili tavsiyelerinizi bekliyorum

Teşekkürler
 
Ben biraz css ve html den sonra bootstrap a geçiş yaptım. Her hafta bir site yapıyoruz. Örneğin geçen hafta e okulun tasarımını yaptık hayet güzel
Editör olara Visual Studio Code yi kullanıyorum (Sublimetext te kurulu)
-Editörlere Snippet eklentileri yükledim
-Css Snippet
-bootstrap snippet
ve emmet eklentileri yüklü bu sayeede hatasız ve hızlı kod yazımı sağlanıyor
 
vlk4n' Alıntı:
Ben biraz css ve html den sonra bootstrap a geçiş yaptım. Her hafta bir site yapıyoruz. Örneğin geçen hafta e okulun tasarımını yaptık hayet güzel
Editör olara Visual Studio Code yi kullanıyorum (Sublimetext te kurulu)
-Editörlere Snippet eklentileri yükledim
-Css Snippet
-bootstrap snippet
ve emmet eklentileri yüklü bu sayeede hatasız ve hızlı kod yazımı sağlanıyor

Evet belli siteyi baz almak iyi olur . Güzel fikir. Hemde herkes ne yapacağını görür.
resimleride hedef siteden alırlar boşuna vakit kaybetmezler :)

Teşekkürler
 
merhabalar ben öğretmen değişim ama bilişim sektöründeyim bende gençlerimize sade müfredattan değil piyada iş yapanları biraz anlatsanız gelişi açısından iyi olur ne mesela bunlar wordpress joomlo şuan tüm eb sitelerin alt yapısı nerdeyse wordpress
 
phpcoder' Alıntı:
ilk dönem html + css ile enaz 5 tane sıfırdan bitene kadar web sitesi yaptırıyorum kasım ayının sonuna kadar. Aralık ayında bootstrap gösteriyorum ve 3 - 4 tane de sıfırdan başlayarak site hazırlıyoruz.

Geçen yıllarda ikinci dönem php gösterdim hep. pdo ile veritabanı üzerinde yönetim paneli ve site olacak şekilde siteler hazırladık. Ama sınıf genelinde başarı ilk döneme göre %15 - %20 lere düştü. yapamayanlar d yapabilenler aracılığıyla ödevlerini projelerini hazırlayıp teslim ettiler.

her sene öğrencilerime bir site açtırıyorum. bir domain alıp her öğrenciye bir sub domain açarak tüm öğrencilere ftp bilgilerini vererek sitelerini yayınlatmayı da öğretiyorum. php ile yapılan dinamik siteleri de yayınlamayı gösteriyorum.

bu sene ikinci dönem değişiklik olsun diye asp.net mvc göstermeye başladım. sanırım veritabanı göstermeyeceğim. masterpage yapısıyla bootstrap kullanarak siteler tasarlayacağız diye planlarım var.

Geçen yıllarda ikinci dönem php kullandığım zamanlarda, bölüm zümresinde karar olarak belirtiyorduk asp.net yerine php kullanacağımızı.

hocam masterpage ile bootstrap örneği-eğitimi var mı hiç acaba? asp.net'e entegre etme konusunda sıkıntı yaşadım yaşıyorum...
 
İşleyişiniz planınız çok güzel hocam. Ben de bu tarz işlemek istiyorum aslında ama tam bir düzene oturtamadım. Sınıfın iki grup olması da bunda etken. İki arkadaş ortaklaşa dokümanıyla uygulamasıyla herşeyi önceden hazırlayıp o şekilde yapmak gerekiyor. Modüller gereksiz ve eskimiş bilgilerle dolu. Programlama temelleri gibi toplama çıkarma örnekleriyle javascriptin hiçbir faydası yok. Ben de daha çok dom işlemleri üzerine durmaya çalışıyorum. Jquery, angular, bootstrap ve diğer responsive frameworkleri sadece tanıtım gibi 1 hafta falan gösteriyorum şu an için fakat şu devirde bunları bilmeden mezun olmaması gerekir öğrencinin aslında. Ücretsiz domain açtırıp denemeler yaptırıyordum fakat 4mb internet ile bundan da verim alamadım fiberi bekliyorum. 11. sınıftan aspnet vs backend kısmı kesinlikle kaldırılmalı. Bunun yerine frontend geliştirilmeli. Öğrenci mezun olduğunda en azından bir etiketi olur ben şunu yaparım diyebilir. Böyle olunca herşeyden bilen ama hiçbirşeyi tam bilmeyen bir profil çıkıyor ortaya
 
Ne yazık ki megep'in modülleri 10 yıl öncesinin yazılmış olan modüller. 10 yıl boyunca hiçbir editleme söz konusu olmadı.Hal böyle olunca öğretmenler dersi amacına uygun olarak vermeye başladı. Artık 10 yıl önceki web dünyasında yaşamıyoruz. Bundan yaklaşık 12 sene önce lisedeyken okulumuzun eski öğrencisi amerikadan okulu ziyarete geldi. Hatırladığım kadarıyla şuna benzer bir şey söylemişti. Artık her şey javascripte kayıyor. Çalışmalar da o yönde ilerliyor. Gel zaman git zaman şimdi, gerçekten de her şey javascript temelli olmaya evriliyor. O zamanlar iyi bir javascript bilgisi olan kimseler popülerken şimdi kütüphaneleri bilenler aranır oldu.

Vue Js, özellikle de google destekli Angular, ms destekli typescript birçok yerde kullanılıyor. Mobil uygulama bile yazabiliyorsunuz bunlar ile.

https://ionicframework.com/

https://www.w3schools.com/angular/default.asp

Grafik ve Tasarım dersinde ise aslında Adobe xd tabanlı uygulamalar ve varsa imkan sketch daha uygun olur diye düşünüyorum.


Editör olarak birçok editör bulunmakta. Aralarında daha iyi diyebileceğim sadece Visual Studio Code var

https://code.visualstudio.com/

Edit: Dersi template üzerinden işliyoruz. Jquery Mobile ve bootstrap ağırlıklı temalar yarıdan sonra ağrlık veriyoruz.
 
11. sınıfta Veritabanını ASP.Net içinde gösteriyordum ama pdo ile hiç göstermedim. 12. sınıfta da phpde veritabanı gösteriyoruz zaten. CMS konusuna 11. sınıfta girmedim ama 12. sınıfın müfredatında var. 12. sınıfta anlatıyorum. Teşekkürler


Kaynaklarım: w3school ve Fatih Hayrioğlunun CSS kitabı

Öğrencilere canlı site açtırma konusunda başka bir başlıkta yazdıklarımı burada da yazayım:
Bi yıl kendime host alıp 30 ftp hesabı açıp çocuklara dağıttım sonuç 2-3 öğrenci dışında ilgi yok.
Başka bi yıl öğrencilere ücretsiz tk domain alıp reseller paket aldım ve çocuklara ücretsiz cpanel verdim sonuç: 2-3 öğrenci dışında ilgi yok
Eskiden bedava hosting arıyordum sonra şunu fark ettim ki insanoğlu için bedavanın bir değeri olmuyor. Para verecek ki değerini anlasın.
Geçen yıldan beri isteyenlere en ucuz ve kaliteli ücretli domain+hosting nereden alınır anlatıyorum. öğrenci ininal kart alıp para yüklüyor. Gerçek bir alan adı ve hosting nasıl alınır nasıl yönetilir A'dan Z'ye öğreniyor. para verdiği için de içerik ekliyor. Bu sefer 8-9 öğrenci ilgili. Geçen yıldan kendi alan adı ve hostingini alanlardan iki tanesi başkaları için alan adı hosting alıp iş yapmış mutlu oldum. Bu arada Alan adı + 1 yıllık hosting 35TL'ye buldum öğrenciler için bile uygun olduğunu düşünüyorum. Ayrıca staj başvurusunda da kendi sitesi olanlar bir adım önde oluyor.

Web Tasarım Dersini İşleyen Diğer Arkadaşlar da yazarsa sevinirim.
Hocam 35 tl ye domain +hosting i nerden aldığınızı paylaşır mısınız.
 
Geri
Üst