Geçmişte bazı HTML, CSS ve PHP kodlamaları yaptım, ancak daha önce "bitmiş" şeyler üzerinde çalıştım ve hiç bir web sayfasını sıfırdan başlatmadım. Ancak, son zamanlarda bir etki alanı ve bazılarını ucuza satın aldım ve HTML, CSS ve Javascript becerilerimi geliştirmeyi umuyorum, böylece bir web geliştiricisi / web yöneticisi olarak biraz daha pazarlanabilir hale gelebilirim.

Genellikle, bir web sitesini başlatmak için hangi süreci kullanıyorsunuz? Düzeni kağıda çizer ve sonra kodu yazar mısın? Yoksa sadece kodlamaya başlayıp çıktısını istediğiniz gibi ayarlıyor musunuz?

Sürecim genellikle biraz şuna benziyor:

1. Özellikler . Kalem ve kağıtla, siteyi oluşturacak belirgin özellikler / sayfalar düzenleyin. Bu geniş vuruş sorularına cevap veriyor - annen için basit bir bilgi ve grafik sitesi mi kuruyorsun? Küçük işletmeler için bir e-ticaret çözümü? fotoğrafçı bir arkadaş için blog / galeri? Cevabınız, izlemeniz gereken yapım yolu hakkında çok şey belirleyecektir. Bu aşama aynı zamanda bir müşteriyle veya tekneyi kim kullanıyorsa (siz değilseniz) önemli bir tartışma içerebilir.

2. Tel kafes . Gereken tüm özellikler ile bir tel kafes hazırlayın. Kağıt üzerinde veya havai fişek benzeri bir araçla çok basit gezinme işlevselliği oluşturmanıza olanak sağlayacak. Wordpress gibi bir CMS ile çalışıyorsanız, statik içeriğiniz nasıl ele alınacak? Bu, dosya yapısını düşünmeye başlamak için iyi bir zaman olabilir. Projeniz özel bir veritabanına ihtiyaç duyacaksa, şimdi tasarımını ve uygulamasını planlamaya başlamanın tam zamanı. Bu, kritik bir aşamadır; çünkü akıllı planlama, hatalar yapıldığında veya proje sürünürlüğü meydana geldiğinde, çok fazla geri izleme ve yeniden işleme kurtaracaktır.

3. Teknoloji . Planlama aşaması nispeten ilerlediğinde - teknolojinizi seçin. Düz HTML yapıyor musun? lamba ortamında bir php cms? .net mvc mağazası? Bu sorular, barındırma ortamının gerekli olacağı gibi bir şeyi çalıştırmanın maliyetini de etkileyebilir. Bir vitrin yapıyorsanız, güvenlik burada birincil bir sorundur (örneğin, SSL'ler ve PCI uyumluluğu). Harika bir test ortamına sahip olduğunuzdan emin olun (localhost veya başka şekilde).

4. Tasarım / Düzen . Özellik listeniz ve tel kafesiniz oldukça iyi belirlendiğinde, sitenin tasarımı hakkında düşünmeye başlayabilirsiniz. Sayfaları neyin dolduracağını bilmek açık bir ön şarttır. Photoshop'ta çalışmayı ve işaretleme yapınıza bir analog olarak klasörleri yoğun şekilde kullanmayı seviyorum. Onları hedeflenen işaretleme ve css tanımlayıcıları ile isimlendirecek kadar ileri giderim. Her ne kadar gerçekten ayrıntılı olmadan önce bazı serbest form çizimleri yapmak akıllıca olacaktır. Elemanları alacağım "layout" dosyalarından faydalanma eğilimindeyim ve "işlem" dosyalarına yerleştirmeye meyilliyim - üretim grafikleri çıktılamak için kullandığım dosyalar.

5. İşaretleme / CSS . Oldukça temiz bir tasarım yapıldıktan sonra (üretim moduna girerken kesinlikle biraz esneyeceği düşünülürse) işaretlemeye başlayabilirsiniz. Genel olarak sitedeki tüm içeriği barındıracak standart bir yerleşime sahip olmayı seviyorum. Yani - temiz ve esnek burada kilit nokta olmalıdır. Mizanpaj işaretlemesi, CSS yazmaya başlamadan önce oldukça tamamlanmış olmalı, ancak birbirlerini bilgilendirmek için çok şey yaptıklarını biliyorum. Ayrıca, bu aşamada çok fazla SEO optimizasyonu yapacaksınız (resimlerin veya A etiketlerinin, meta bilgilerinin, doktiplerin vs. uygun şekilde isimlendirilmesi).

5.1 Tema Yönetimi . Bir CMS ile çalışıyorsanız ve tasarımınız kişiselleştirilmiş bir tema olarak kullanılacaksa, tam olarak istediğiniz uygulama için bunun nasıl yapılacağına dair bazı dersler bulun. Bu korkutucu olabilir, açıkçası;) Tema öğelerine ayırmadan önce her zaman oldukça eksiksiz CSS ile statik bir işaretleme düzeni oluşturacağım.

6. Davranış . İşaretlemeniz ve css'ınız oldukça eksiksiz göründüğünde ve belki de temanız yerinde olduğunda, kesinlikle davranış gerektiren özellikleri (rollover'lar vb.) Geliştirmeye başlayabilirsiniz. galeri veya veri odaklı flash içeriği). Genel kural şudur: birisi sitenizi javascript ile kapalıyken ziyaret ederse, ne görecek? Bazen statik elemanları kaldırırım ve çalışma zamanında etkileşimli sürümlerle değiştiririm.

7. İçerik . Tasarım içeriğe bağlı değilse (örneğin, bazen içerik olabilir) = Tasarım ve davranış oldukça iyi bir şekilde kuruluncaya kadar genellikle yer tutucu metin / grafikler kullanırım. Birden fazla işi yapmaktan kaçının. Ürün verilerini dolduruyorsanız dikkatli bir hata kontrolü ve test yapılması gerekecektir.

Bu noktada, her zaman bir elden geçirme, sabitleme ve cilalama dönemi olduğu görülüyor. Fakat, esasen, onu hayata geçirme zamanı. O zaman git bir şeyler atıştır.

Hmmm. Sanırım bu sadece "nasıl başlamalı" değil. Ama yine de yardımcı olabilir. İyi şanslar!

Bir web sitesi tasarlarken nedenini sorarak başladım.

İş akışımın ilk kısmı neden soruyor? Bir müşteriyle çalışıyorsam, web sitesinin neyi başarmasını istediklerine dair net bir tanımlanmış vizyona sahip olduklarından emin olmam gerekir.

1. Neden Sorular.

• Bana biraz kendinizden ve neden bunu yaptığınızdan bahsedin.

• Müşteriler kimler? Özel ihtiyaçları / acıları nedir? Lütfen bana, müşterilerin ihtiyaç duydukları, web sitesinin kendileri için neler yapabileceklerine dair birkaç özel örnek verebileceksiniz.

• Bana işi anlat. Tam olarak ne iş yapıyorsun?

• Seni bir sonraki adamdan daha iyi yapan ne?

• Hizmeti arıyorsanız, işletmeniz Google’a bulmak için ne yazacağınızı sağlar?

Sitenizi kendiniz için oluşturuyorsanız, bu cevapların ne olduğunu zaten biliyorsunuzdur.

Yukarıdaki soruların cevaplarına dayanarak karar verirseniz, bu insanların ciddi ve aslında iyi bir fikirleri olduğunu. Öyleyse devam et (Unutmayın ki henüz ödeme almıyorsunuz, ancak sizi işe almaları için çoraplarını çıkarsanız iyi olur.)

2. Araştırma.

Müşteriyi ve işini araştırmak için biraz zaman harcayın Geçmiş başarılarını ve karşılaştıkları sorunları öğrenin. İşe aldıkları 3. geliştirici siz misiniz? Diğer 2 adama ne oldu?

Müşterinin neye ihtiyacı olduğunu öğrenin. Bu siteyi kimin için inşa edeceksin? Müşteri, 60 yaşında emekli bir veteriner ya da tüm gün Facebook'ta Farmville oynayan 16 yaşında sivilce yüzlü bir çocuktur.

Rakiplerin kim olduğunu bulun. Bilmeyebilirler bile. 5 ila 10 yarışmacıdan oluşan rekabetçi bir analiz yapın ve Serps'te kimin kıçını tekmelememiz gerektiğini öğrenin. Anahtar kelimenin hedeflerinin ne olduğunu bilmeniz gereken aşama budur. Daha sonra ve zaten başarısız.

2b Teklif

Onları işletmeleri konusundaki bilgilerinizle havaya uçurun ve bir web sitesi sözleşmesi / teklifi hazırlayın ve kabul ettiklerinde sözleşmenize hazır olun. İmzalanmış sözleşmeyi ve% 50 depozitoyu alın ve 3. adıma geçin.

3. Misyon - Bir tane var

Burada ortak bir tema var: tüm bu durumlarda, görev ürünle ilgili değil. Misyon “gerçekten” bir şey, eğer gerçekten ciddiysen, ürünün kesinlikle şaşırtıcı olmasını gerektiriyor, bu yüzden bunu gerçekleştiriyorsun. İsterseniz: bu görevlerin hepsi cevap, neden bu yeni özelliği ekledik? - Benjamin Pollack.

Zaman çizelgesi oluşturulmalı, böylece herkes beklentilerini perspektif içinde görebilecek.

4. İş Akışı

Burası çoğu insanın başladığı yer, bu yüzden süreci açıklayacağım ancak durumunuz, takım, müşteri vb. İçin hangi iş akışının en iyi olduğuna karar vermelisiniz

1. Benim için İçerik önce gelir. Herhangi bir kod yazılmadan önce müşterinin büyük çoğunluğunun yapıldığından emin olun. Son taslak prova düzenlemeden bahsetmiyoruz, sayfalarda olacak metinlerden sözler az ya da çok. Bir pazarlama ekibinin katılımı durumunda, bu biraz zaman alabilir.

2. Sitenin nasıl görüneceği hakkında zaten bir fikriniz olmalı. İçeriğe sahip olmalısınız. Şimdi 3. adımda ortaya koyduğunuz hedefi gerçekleştirecek düzen ve genel tasarım ilkeleri üzerinde çalışmanız gerekiyor.

   Tel kafeslerden nefret ediyorum ama gerekli olduklarını biliyorum. Sadece sitenin müşterinizin neye benzediğini bilmediğinizden. Bu sizin güvenliğiniz ve müşterileriniz içindir. Herkes mutlu olduğunda, "Yapman için sana para ödüyoruz" yazan bir şeyi imzalat.

3. Öncü geliştirme ve kullanıcı arayüzü - BROWSER'da HTML, CSS ve TASARIM , Andy Clarke'ın Hardboiled tekniği. Photoshop'ta daha gerçekçi bir mockup gösterebileceğimi bildiğimde Photoshop'ta gelişmeye başlamamı sağlayan çok fazla zaman harcamaktan yoruldum.

4b. Codebase

Sonunda biraz eğlenmeye başladın. Siz ve müşterileriniz için başlamadan önce VERSION CONTROL'ü kullanın . Versiyon kontrolü yaptığınız için, devam etmeli ve bu sırada iken HATA İZLEMEYİ kurmalısınız .

4c. Düzenlemeyi Kopyala

Sahip olduğumuz içeriği hatırlıyor musunuz? Şimdi ne zaman kopyalanmalı, düzeltilmelidir. Bunu emerim, bu yüzden başka birini işe almaya çalışıyorum veya birçok insanın okuduğundan emin oluyorum. 2. adımda konuştuğumuz anahtar kelimelerin SEO için optimize edildiğinden emin olun. İçeriğimiz harika ve aslında bu anahtar kelimelerle ilgiliyse, bu doğal olarak gelmelidir.

5. Beta ve UI Testi

Sitenizin önünde oturup, nefes alan bazı gerçek insanları al ve kullanmaya başla. Bazen arayan ve yazıcının neden yazdırmayacağını bilmek isteyen annemi listelemeyi seviyorum . Elbette yukarıdaki 16 yaşındaki sivilce yüzlü çocuk örneğini kullanmadıkça, bu tür kullanıcıların sitenizi gezebilmesi gerekir.

6. Bakım ve SEO Planı

Herkesin sunucu canavarlarıyla savaşmaktan kimin sorumlu olduğunu bildiğinden emin olun .

Bir ay içinde yaptığımız rekabet analizine geri dönüp sitemizi analiz ettiklerimizle karşılaştırın. SEO planınızı oluşturmak için bu verileri kullanın ve HAYIR Yılan yağı SEO hakkında konuşmuyorum, hala yeniden oluşturucu içerik oluşturduğunuzdan, sitelerin doğal olarak size bağlı olduğundan (çok müthiş olduğunuzdan) ve başlık etiketlerinden emin olmaktan bahsediyorum gövde metniyle eşleşin. SEO, Stack Overflow'unuz olmadığı sürece sizin için kaliteli içerik üretmek için 14.1 milyon kullanıcılı bir orduya sahip olmadıkça uzun bir süreçtir .

Kaliteli içerik ve "tirelenmiş site" de bulduğum şeyler arasında bağlantı kuramayacağım büyük bir fark var. (Takip etmeyen meyve suyunun üzerine damlamalarını önlemek için).

7. Başlat

Herşey çalışıyor? Beraberlik kurma misyonu başarıldı mı? Bir fırlatma planı yapın ve uygulayın.

Eğer adım 1 herşeyin hakkını yaptıysak - 6 Fırlatma bir esinti olacak hiçbir grev sen belki sorunlar olacaktır. Sadece onlar için hazır olun ve hataları düzeltin.

Faturayı gönderin, durulayın ve tekrarlayın.

İle başlamak istiyorum <!DOCTYPE html>

Cidden olsa da ... ilk öncelikler:

1. Müşterinin ne istediğini öğren. Temel düzen için kaba bir taslak çizin, renk düzeni vb.
2. Temel bir gezinme ve mizanpaj mock up yapın (statik) ve düzeltmek için müşteri ile birlikte çalışın.
3. Gerçek üretim. CMS'yi ve / veya statik içeriği yerine getirin. Aradıklarını ve CMS ile başa çıkabildiklerinden emin olmak için müşteriyle tekrar görüşün / CMS ihtiyaçlarını karşılayabilir.
4. İyileştirin ve müşteri mutlu olana kadar 3'ü tekrarlayın.
5. ????
6. Kar!

Öncelikle kodlamaya başlamadan önce temel düzeni çizer ve kağıt üzerine tasarlardım. Temel tasarımı kağıda tamamladıktan sonra, modüler şekilde kodlamak kolaydır.

Her zaman bir çeşit photoshop yazılımı kullanarak mockup yaparak başlamak isterim ki böylece sitenize herhangi bir görüntüyü dahil edebilir.

Cevapların çoğu zaten derinlemesine devam ediyor, sadece bazı çerçeveler veya şablonlar kullanmanız gerektiğini eklememe izin verin, böylece temel bilgileri yeniden yazmak için zaman kaybetmeyin.

Orada pek çok PHP çerçevesi var ( Kohana benim kişisel favorim) ya da birçok kişi Wordpress'i temel olarak kullanıyor. Ayrıca bir CSS çerçevesi kullanabilirsiniz, yine orada birçokları var, en popülerlerinden biri 960 ızgara sistemi.

Bir web sitesi tasarlarken, genellikle nasıl başlar ?

Sizin gibi birkaç yıl önce kendimi bir web geliştiricisi / tasarımcısı olarak pazarlamam gerektiğini öğrendim. Kendi aklımda anlamak için başlangıç ​​yerimi buldum , web sitemi ziyaret eden ziyaretçilere hangi bilgileri, imajları ve mesajları sunmak isterim? ve web sitemi ziyaret ederken kullanıcının başarmasını / yapmasını istediğim şey .

Bir keresinde tasarım sürecinin anlaşılmasının çok daha netleştiğini anladım. Ana sayfamın öğelerini ve daha sonra bu öğeleri iletecek sayfaları yazmamı sağladı.

Mesela CV'mi kolayca ulaşılabilir ve indirilebilir hale getirmek için çok istekliydim. Bu yüzden sitemi tasarlarken CV'm ve nerede uygun bir yerde bulunabileceği hakkında bu bilgiyi sağladım.

Hikayenin ahlaki alakalı olmaktır. Web sitenizdeki her şey bir amaca hizmet etmelidir, aksi takdirde sadece gereksiz gürültü.